CODEWITHSUNDEEP
cssanimationcss-transitionskeyframecss-animations
Googlebot
Googlebot

Reputation: 15683

How to display an element in the middle of CSS3 animation

In this example, I want to display the element just in a step of the animation. However, it is not possible, because if I set display:none in the main CSS rule, the animation will not override it.

#test {
    -webkit-animation: test 2s;
    display:none; // here is the problem, as the animation does not override it.
}

@-webkit-keyframes test {
    0%{margin:5px}
    20%{display:block}
    70%{margin:40px}
}

Note that this is a simplified example, and in practice, I need to use display:none to hide the element before it becomes visible by the animation. Thus, other tricks like opacity does not satisfy my need.

Upvotes: 0

Views: 192

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9654

I'm not sure what you're trying to do, if you want to hide the element and just show it when the animation starts, make use of visibility property like this:

#test {
  -webkit-animation: test 2s;
  visibility:hidden;
 }

@-webkit-keyframes test {
   0%{margin:5px}
  20%{visibility:visible}
  70%{margin:40px}
}

fiddle example

Upvotes: 1

Related Questions