简体   繁体   中英

CSS @keyframes not working in Chrome

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM