I was experimenting CSS3 @keyframes animations but I didn't managed to make it work in Chrome (currently I have Chrome 38)
The code is really simple :
HTML
<div id="block">moving text</div>
CSS
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
animation: mymove 2s infinite;
}
Here is a Fiddle with the same code.
For me the text isn't moving in Chrome 38, but it works great on Firefox 30 and IE 11.
I have tried to use @-webkit-keyframes
but the text doesn't move either in Chrome.
You need to use the vendor prefix on both the style property, and keyframes function
@-webkit-keyframes mymove /* <--- here */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
-webkit-animation: mymove 2s infinite;/* <--- and here */
}
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