Menu
http://jsfiddle.net/cD4Gr/1/
This is my animation code:
@-webkit-keyframes silde_to_top {
0% {
bottom: 0%;
top: default;
}
100% {
bottom: default;
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
#test{
-webkit-animation-name: silde_to_top;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
currently, the div just auto-starts at the top, instead of sliding to the top. the only thing that animates is the opacity.
724
you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element. Save this answer. Show activity on this post. To animate with left , top , bottom or right , you either have to have a absolutely positioned or floated element.
First start with the @keyframes rule followed by name of the animation (In this case, it is “floating”). Inside the @keyframes, you can see 3 percentage values have been declared. It is followed by a code snippet containing properties and their values.
Definition and Usage. The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
It can't animate from a percent value to a default/auto value (or vice versa). This code gets it to work, albeit it starts offscreen:
@-webkit-keyframes silde_to_top {
0% {
top: 100%;
}
100% {
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
Here's your fiddle example: http://jsfiddle.net/blineberry/cD4Gr/2/
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
