Animation CSS3 display opacity

Question

I have got a problem with a CSS3 animation      child       opacity  0      display  none       -webkit-transition  opacity 0 5s ease-in-out      -moz-transition  opacity 0 5s ease-in-out      transition  opacity 0 5s ease-in-out      parent hover  child       opacity  0 9      display  block      This code only works if I remove the change of display   I want to change the display just after the hover but the opacity should be changed using the transition

User · Accepted Answer

I changed a bit but the result is beautiful.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Thank you to everyone.

User · Answer

One thing that I did was set the initial state s margin to be something like  margin-left  -9999px  so it does not appear on the screen  and then reset  margin-left  0  on the hover state  Keep it  display  block  in that case  Did the trick for me     Edit  Save the state and not revert to previous hover state  Ok here we need JS    lt style gt   hovered           hover styles here       lt  style gt    lt script type  text javascript  gt      link   hover function        var  link     this      if    link hasclass  hovered         check to see if the class was already given           this  addClass  hovered               lt  script gt

User · Answer

I know  this is not really a solution for your question  because you ask for      display   opacity   My approach solves a more general question  but maybe this was the background problem that should be solved by using display in combination with opacity   My desire was to get the Element out of the way when it is not visible  This solution does exactly that  It moves the element out of the away  and this can be used for transition      child     left  -2000px    opacity  0    visibility  hidden    transition  left 0s 0 8s  visibility 0s 0 8s  opacity 0 8s      parent hover  child     left  0    opacity  1    visibility  visible    transition  left 0s  visibility 0s  opacity 0 8s      This code does not contain any browser prefixes or backward compatibility hacks  It just illustrates the concept how the element is moved away as it is not needed any more   The interesting part are the two different transition definitions  When the mouse-pointer is hovering the  parent element the  child element needs to be put in place immediately and then the opacity will be changed   transition  left 0s  visibility 0s  opacity 0 8s    When there is no hover  or the mouse-pointer was moved off the element  one has to wait until the opacity change has finished before the element can be moved off screen   transition  left 0s 0 8s  visibility 0s 0 8s  opacity 0 8s    Moving the object away will be a viable alternative in a case where setting display none would not break the layout   I hope I hit the nail on the head for this question although I did not answer it

User · Answer

On absolute or fixed elements you could also use z-index    item       position  absolute      z-index  -100      item hover       z-index  100      Other elements should have a z-index between -100 and 100 now

User · Answer

There is another good method to get this done by using pointer-events    child       opacity  0      pointer-events  none       -webkit-transition  opacity 0 5s ease-in-out      -moz-transition  opacity 0 5s ease-in-out      transition  opacity 0 5s ease-in-out      parent hover  child       opacity  0 9      pointer-events  all      Unfortunately  this is not supported in IE10 and below

User · Answer

HOW TO ANIMATE OPACITY WITH CSS  this is my code  the CSS code  x000D   x000D   item          height 200px      width 200px      background red      opacity 0      transition  opacity 1s ease-in-out      item hover       opacity  1    code       background  linear-gradient to right  fce4ed  ffe8cc     x000D   lt div class  item  gt    lt  div gt   lt p gt  lt code gt  move mouse over top of this text lt  code gt  lt  p gt  x000D   x000D   x000D   or check this demo file  function vote     var vote   getElementById  quot yourOpinion quot      if this workWithYou     vote    1     lol

User · Answer

Based on Michaels answer this is the actual CSS code to use   parent hover  child       display  block       -webkit-animation  fadeInFromNone 0 5s ease-out      -moz-animation  fadeInFromNone 0 5s ease-out      -o-animation  fadeInFromNone 0 5s ease-out      animation  fadeInFromNone 0 5s ease-out      -webkit-keyframes fadeInFromNone       0            display  none          opacity  0             1            display  block          opacity  0             100            display  block          opacity  1            -moz-keyframes fadeInFromNone       0            display  none          opacity  0             1            display  block          opacity  0             100            display  block          opacity  1            -o-keyframes fadeInFromNone       0            display  none          opacity  0             1            display  block          opacity  0             100            display  block          opacity  1            keyframes fadeInFromNone       0            display  none          opacity  0             1            display  block          opacity  0             100            display  block          opacity  1

User · Answer

If possible - use visibility instead of display  For instance    child       visibility  hidden      opacity  0      transition  opacity 0 3s  visibility 0 3s      parent hover  child       visibility  visible      opacity  1      transition  opacity 0 3s  visibility 0 3s

User · Answer

If you are triggering the change with JS  let s say on click  there is a nice workaround  You see  the problem happens because the animation is ignored on display none element but browser applies all the changes at once and the element is never display block while not animated at the same time  The trick is to ask the browser to render the frame after changing the visibility but before triggering the animation  Here is a JQuery example          child   css   quot display quot   quot block quot           now ask the browser what is the value of the display property         child   css  quot display quot      this will trigger the browser to apply the change  this costs one frame render       now a change to opacity will trigger the animation         child   css  quot opacity quot  100

User · Answer

To have animation on both ways onHoverIn Out I did this solution  Hope it will help to someone   keyframes fadeOutFromBlock     0        position  relative      opacity  1      transform  translateX 0          90        position  relative      opacity  0      transform  translateX 0          100        position  absolute      opacity  0      transform  translateX -999px           keyframes fadeInFromNone     0        position  absolute      opacity  0      transform  translateX -999px          1        position  relative      opacity  0      transform  translateX 0          100        position  relative      opacity  1      transform  translateX 0           drafts-content     position  relative    opacity  1    transform  translateX 0     animation  fadeInFromNone 1s ease-in    will-change  opacity  transform      amp  hide-drafts       position  absolute      opacity  0      transform  translateX -999px       animation  fadeOutFromBlock 0 5s ease-out      will-change  opacity  transform

User · Answer

This workaround works    define a    keyframe       -webkit-keyframes fadeIn      0    opacity  0      20    opacity  0      40    opacity  0 3      60    opacity  0 5      80    opacity  0 9      100    opacity  1        keyframes fadeIn     0    opacity  0      20    opacity  0      40    opacity  0 3      60    opacity  0 5      80    opacity  0 9      100    opacity  1       Use this    keyframe    on    hover      div a span      display  none     div a hover span     display  block     -webkit-animation-name  fadeIn    -webkit-animation-duration  1s    animation-name  fadeIn    animation-duration  1s

User · Answer

I had the same problem   I tried using animations instead of transitions - as suggested by  MichaelMullany and  Chris - but it only worked for webkit browsers even if I copy-pasted with  -moz  and  -o  prefixes   I was able to get around the problem by using visibility instead of display   This works for me because my child element is position  absolute  so document flow isn t being affected   It might work for others too   This is what the original code would look like using my solution    child       position  absolute      opacity  0      visibility  hidden       -webkit-transition  opacity 0 5s ease-in-out      -moz-transition  opacity 0 5s ease-in-out      transition  opacity 0 5s ease-in-out      parent hover  child       position  relative      opacity  0 9      visibility  visible

User · Answer

You can do with CSS animations   0  display none   opacity  0  1  display  block   opacity  0  100  display  block   opacity  1

User · Answer

I used this to achieve it  They fade on hover but take no space when hidden  perfect   child       height  0px      opacity  0      visibility  hidden      transition  all  5s ease-in-out      parent hover  child       height  auto      opacity  1      visibility  visible

User · Answer

display  is not transitionable  You ll probably need to use jQuery to do what you want to do

[animation] Animation CSS3: display + opacity

Examples related to animation

Examples related to css