一个栗子上手CSS3动画

1. timing-function属性：

ease 规定慢速开端，然后变快，然后慢速停止的过渡效不雅。
ease-in 规定以慢速开端的过渡效不雅。
ease-out 规定以慢速停止的过渡效不雅。
ease-in-out 规定以慢速开端和停止的过渡效不雅。
linear 动画大年夜头到尾的速度是雷同的。
cubic-bezier(n,n,n,n) 在cubic-bezier函数中本身的值，n取值为0～1
steps()

一个栗子上手CSS3动画

比来杂七杂八的工作很多，很多常识都没来得及总结，是时刻总结总结，开启新的篇章～

本篇文┞仿不一一列举CSS3动画的属性，若须要懂得API，可前去 MDN 。

css3动画分类：

补间动画 – 具有连贯性的动画
逐帧动画 – 应用steps过渡方法实现跳跃

animation常用属性及场景：

animation: name duration timing-function delay iteration-count direction;

在开妒攀栗子前，我们先补补基本常识。

2. delay属性：

用于将动画与其他动画的履行机会错开，将动画落到不合的时光点。这个属性很好用～

动画原则：

活动一般有个惯性，所以要先快后有一个慢一点的反弹。
背景若应用多个星星闪烁，错位闪烁

合营JS应用

slide.addEventListener("webkitAnimationEnd", function() { 
 
   console.log('eeee') //动画停止再调用 
 
});

拭魅战演习：

假如我们须要实现一个如许简单的动画：

1. 入场动画——大年夜右往左移动

3. 逐帧动画

实现办法：

应用3个dom元素，最外层dom实现入场动画，第二层dom实现阁下移动，第三层dom实现逐帧动画。

长处：调试便利，节俭时光。

缺点：dom多。

1. dom构造

<div class="anima_entrance"> 
 
    <div class="anima_move"> 
 
        <div class="anima_sprite"></div> 
 
    </div> 
 
</div>

2. 分析动画形成的时光轴：

入场动画持续0.6s，只播放一次，阁下移动以及逐帧动画持续2s，轮回播放，代码如下：

.anima_entrance { 
 
    animation: anima_entrance .6s ease-in-out both; 
 
} 
 
  
 
.anima_move { 
 
    animation: anima_move 2s linear .6s infinite both; 
 
} 
 
  
 
.anima_sprite { 
 
    animation: anima_sprite 2s step-end .6s infinite both; 
 
}  	
			 1/4    1 2 3 4 下一页 尾页	
			

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


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