7

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.

1
  • 1
    It works fine with -webkit-keyframes and -webkit-animation. Check here.
    – Harry
    Commented Jul 17, 2014 at 14:51

1 Answer 1

11

You need to use the vendor prefix on both the style property, and keyframes function

Demo Fiddle

@-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 */
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.