Tôi có một hoạt ảnh nhỏ đang hoạt động trong firefox, nhưng không hoạt động trong trình duyệt webkit. Có thể ai đó thấy nguyên nhân sai lầm tôi đã tìm kiếm một giờ ... Đó là một phần của bản trình bày impress.js, tương tự như prezi. Cảm ơn!hoạt ảnh css3 không hoạt động trong chrome
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>
Nếu ai đó muốn xem hoạt hình ... http://www.messagelab.ro/pages/Presentation.html#/its Các o và e nên di chuyển, như trong firefox ... –
bạn có ' @ -webkit-keyframes aia2 {'quy tắc cho Chrome? –
điểm tốt :) vì vậy nó là dư thừa để viết bên trong -moz-keyframes {-webkit-transform ..}? –