2
A
回答
2
是的,但你可以更漂亮做到這一點,用JavaScript
CSS:
@-webkit-keyframes sprite {
0% { background-position: 0px 0px; }
25% { background-position: 0px 0px; }
25.1% { background-position: -200px 0px; }
50% { background-position: -200px 0px; }
50.1% { background-position: -400px 0px; }
75% { background-position: -400px 0px; }
75.1% { background-position: -400px -200px; }
99.9% { background-position: -400px -200px; }
100% { background-position: 0px 0px; }
}
@-moz-keyframes sprite {
0% { background-position: 0px 0px; }
25% { background-position: 0px 0px; }
25.1% { background-position: -200px 0px; }
50% { background-position: -200px 0px; }
50.1% { background-position: -400px 0px; }
75% { background-position: -400px 0px; }
75.1% { background-position: -400px -200px; }
99.9% { background-position: -400px -200px; }
100% { background-position: 0px 0px; }
}
@-o-keyframes sprite {
0% { background-position: 0px 0px; }
25% { background-position: 0px 0px; }
25.1% { background-position: -200px 0px; }
50% { background-position: -200px 0px; }
50.1% { background-position: -400px 0px; }
75% { background-position: -400px 0px; }
75.1% { background-position: -400px -200px; }
99.9% { background-position: -400px -200px; }
100% { background-position: 0px 0px; }
}
@keyframes sprite {
0% { background-position: 0px 0px; }
25% { background-position: 0px 0px; }
25.1% { background-position: -200px 0px; }
50% { background-position: -200px 0px; }
50.1% { background-position: -400px 0px; }
75% { background-position: -400px 0px; }
75.1% { background-position: -400px -200px; }
99.9% { background-position: -400px -200px; }
100% { background-position: 0px 0px; }
}
div.image {
background: url('http://bponline.amcham.gr/wp-content%5Cuploads/2011/12/out_of_the_box.jpg');
width: 200px;
height: 200px;
-webkit-animation: 5s sprite infinite;
-moz-animation: 5s sprite infinite;
-o-animation: 5s sprite infinite;
animation: 5s sprite infinite;
}
HTML:
<div class='image'></div>
1
如果你真的需要使用關鍵幀動畫只有一個來到我的頭是做的想法:
@keyframes youranim
{
0% {top:0px;}
24.99% {top:0px;}
25% {top:200px;}
49.99% {top:200px;}
50% {top:400px;}
74.99% {top:400px;}
75% {top:600px;} // and so on...
}
我紅認爲,十進制值是OK的CSS3關鍵幀。
5
的關鍵是CSS時機-功能。停止動作幀對應於步進功能。
animation-timing-function:steps(n);
[代碼示例:CSS定格動畫] https://groups.google.com/d/msg/css-animation-art/d6Y83Sv8M4g/yyTAG7oK160J
非常感謝@drinchev,這正是我一直在尋找。感謝您提供演示。 – rvazquez 2013-05-09 15:39:35