我有一个小的动画可以在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> <li>Web Development,</li> <li>Web Design,</li> <li>Log<h5>o</h5> Design,</li> <li>Web Marketing,</li> </ul> <ul class="doua"> <li><h6>e</h6> Commerce,</li> <li>CMS (WP, J, D),</li> <li>Cust m Apps</li> <li>and 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-animation: aia2,-moz-animation: aia2等你来设置像每个浏览器的动画:
-webkit-animation: aia2
-moz-animation: aia2
@-moz-keyframes aia2{ ... } @-webkit-keyframes aia2{ ... } @-o-keyframes aia2{ ... }