软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

html5 – css3动画无法在chrome中工作

收集整理的这篇文章主要介绍了html5 – css3动画无法在chrome中工作,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个在Firefox中工作的小动画,但不是在Webkit浏览器中。也许有人看到错误,因为我已经找了一个小时…它是一个impress.js演示的一部分,类似于prezi。
谢谢!

CSS:

#its.step.present h5{display: inline-block;position:absolute; animation: aia2 5s linear infinite alternate; -moz-animation: aia2 5s linear infinite alternate; -webkit-animation: aia2 5s linear infinite alternate; -ms-animation: aia2 5s linear infinite alternate; -o-animation: aia2 5s linear infinite alternate;-moz-animation-delay: 4s;-webkit-animation-delay: 4s;-ms-animation-delay: 4s;-o-animation-delay: 4s;animation-delay: 4s;}@-moz-keyframes aia2{    0%{        left:120px;        -moz-transform:scale(1) rotate(0deg);        -webkit-transform:scale(1) rotate(0deg);        -ms-transform:scale(1) rotate(0deg);        -o-transform:scale(1) rotate(0deg);        transform:scale(1) rotate(0deg);        color: red;    }    90%{        left: 580px;        -moz-transform:scale(1) rotate(2000deg);        -webkit-transform:scale(1) rotate(2000deg);        -ms-transform:scale(1) rotate(2000deg);        -o-transform:scale(1) rotate(2000deg);        transform:scale(1) rotate(2000deg);    }    100%{        left: 580px;    }}

HTML:

div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"        p            ul                liWeb Development,/li                liWeb Design,/li                liLogh5o/h5nbsp;nbsp; Design,/li                 liWeb Marketing,/li            /ul            ul class="doua"                lih6e/h6nbsp;nbsp;Commerce,/li                liCMS (WP,J,D),/li                 liCustnbsp; m Apps/li                 liand others./li            /ul        /p    /div

解决方法

您必须将浏览器特定的一般动画规则放在一起:
-webkit-animation: aia2 5s linear infinite alternate;   -moz-animation: aia2 5s linear infinite alternate;    -ms-animation: aia2 5s linear infinite alternate;     -o-animation: aia2 5s linear infinite alternate;        animation: aia2 5s linear infinite alternate; /* this comes last */

而且由于你有-webkit动画:aia2,-moz-animation:aia2等,你必须为每个浏览器设置动画,如:

@-moz-keyframes aia2{    ...}@-webkit-keyframes aia2{    ...}@-o-keyframes aia2{    ...}

总结

以上是为你收集整理的html5 – css3动画无法在chrome中工作全部内容,希望文章能够帮你解决html5 – css3动画无法在chrome中工作所遇到的程序开发问题。