3. 应用steps()实现逐帧动画：

应用下面这张雪碧图，经由过程改变background-position实现动画切换。

2. 阁下轮回移动

细心不雅察膳绫擎的动画，我们发明，它可以由以下3部分构成：

蹬蹬蹬，效不雅如下面所示，是不是很掉望😞

有些情况我们须要确保动画停止后再进行别的一些交互，可应用该事宜监听。

原因：因为animation默认以ease方法过渡，它会在每个关键帧之间插入补间动画，所以动画效不雅是连贯性的。此时可以应用steps()撤消补间动画。

贴一个图：

steps(1,start): 动画一开端就跳到 100% 直到这一帧(不是全部周期)停止 == step-start

steps(1,end): 保持 0% 的样式直到这一帧(不是全部周期)停止 == step-end

接着，我们将timing-function改成 step-end，效不雅如下：

animation: sprite 2s step-end .6s infinite both;  

出现想要的效不雅了哈～不错。

完全的css代码如下：

 .anima_entrance { 
    position: absolute; 
 
    z-index: 3; 
 
    top: 5.1rem; 
 
    left: 4.05rem; 
 
    width: 12.9rem; 
 
    height: 19.1rem; 
 
    -webkit-animation: anima_entrance .6s ease-in-out both; 
 
    animation: anima_entrance .6s ease-in-out both; 
 
} 
 
  
 
.anima_move { 
 
    width: 218px; 
 
    height: 382px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 42px; 
 
    -webkit-animation: anima_move 2s linear .6s infinite both; 
 
    animation: anima_move 2s linear .6s infinite both; 
 
} 
 
  
 
.anima_sprite { 
 
    width: 218px; 
 
	
			
 2/4   首页 上一页 1 2 3 4 下一页 尾页
	
			

　　推荐阅读
　　邢台国税 智慧云办税厅升级 130项业务可在线办理
            
            为包管云厅2.0版顺利履行，邢台市国税局制订了工作筹划，明白阶段性的工作目标、义务分工和履行进度请求，纳入台账式治理。在桥东区国税局进级后的聪明云办税区，安装有16台互联电脑和1台>>>详细阅读


本文标题：一个栗子上手CSS3动画
地址：http://www.17bianji.com/lsqh/35169.html
 1/2    1