CSS @keyframes не работает в Chrome

Я экспериментировал с анимацией CSS3 @keyframes, но мне не удалось заставить ее работать в Chrome (сейчас у меня Chrome 38)

Код действительно прост:

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;
}

Вот Fiddle с тем же кодом.

Для меня текст не перемещается в Chrome 38, но он отлично работает в Firefox 30 и IE 11.

Я пытался использовать @-webkit-keyframes, но текст не перемещается и в Chrome.


html css css-animations
person singe3    schedule 17.07.2014    source источник
comment
Он отлично работает с -webkit-keyframes и -webkit-animation. Проверьте здесь.   -  person Harry    schedule 17.07.2014

Ответы (1)


arrow_upward
9
arrow_downward

Вам нужно использовать префикс поставщика как для свойства стиля, так и для функции ключевых кадров.

Демонстрационная скрипта

@-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 */
}
person SW4    schedule 17.07.2014