HTML+CSS动画波纹效果和奔跑的大熊

动画概念

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画。常用来实现复杂的动画效果。

相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的使用

定义动画：使用@keyframes定义动画

语法：

@keyframes 动画名称{
    %0{

    }
    100%{

    }

}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数
• 用百分比来规定动画发生的时间，或用关键词from和to，等同于0%和100%

 使用动画

div{
    animation-name：动画名称
    animation-duration：持续时间
}

动画的属性

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	定义@keyframes动画的名称，必填
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认0，必填
animation-timing-function	规定动画的速度曲线，默认ease
animation-delay	规定动画何时开始，默认0立刻开始
animation-iteration-count	规定动画的播放次数，默认是1，还有infinite无限循环
animation-direction	规定动画是否在下一个周期逆向播放，默认是normal，alternate逆向播放
animation-play-state	规定动画是否在运行或暂停，默认是running还有pause
animation-fill-mode	规定动画结束后状态，保持forwards，回到起始backwards

动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画开始或结束状态

• 简写属性里不包含animation-play-state
• 暂停动画animation-play-state经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来，animation-direction：alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode：forwards        

动画案例

案例1： 实现波纹效果

案例2：实现奔跑的大熊

基本思路：如下图所示一张图片上有8个不同状态的大熊，每个大熊的宽度大约是160px，我们定义一个宽为160px的div盒子，然后把这个图片作为盒子的背景图片，然后通过动画控制背景图片的位置，每次向左移动一个大熊的的位置，所以8个大熊（背景图片的总宽度）分为8次移动结束。这里需要制定animation-timing-function的属性为steps(8)，这样连续起来就像大熊在奔跑一样。然后我们再定义一组盒子移动的动画。让盒子从左边移动到右边。多组动画用逗号分隔。