目录
一、动画的定义
二、动画的基本使用
2.1.-animation-name
2.2.-animation-duration
2.3.-animation-timing-function
2.4.-animation-delay
2.5.-animation-iteration-count
2.6.-animation-direction
2.7.-animation-fill-mode
2.8.-animation-play-state
2.9.动画模块连写格式
三、飘动的云朵动画的实现
一、动画的定义
过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，不过对过渡动画理解后再不习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。
二、动画的基本使用
2.1.-animation-name
指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画
通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
2.2.-animation-duration
动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长
time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。
2.3.-animation-timing-function
设置动画将如何完成一个周期，告诉系统动画执行的速度
值执行速度linear动画从头到尾的速度是相同的。匀速ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
2.4.-animation-delay
设置动画在启动前的延迟间隔。time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
2.5.-animation-iteration-count
定义动画的播放次数。告诉系统动画需要执行几次
值执行次数n一个数字，定义应该播放多少次动画infinite 无限次执行
2.6.-animation-direction
指定是否应该轮流反向播放动画。
值播放方向normal默认的取值, 执行完一次之后回到起点继续执行下一次alternate往返动画, 执行完一次之后往回执行下一次reverse反向执行
2.7.-animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none不做任何改变forwards让元素结束状态保持动画最后一帧的样式backwards让元素等待状态的时候显示动画第一帧的样式both让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
2.8.-animation-play-state
告诉系统当前动画是否需要暂停
running: 执行动画
paused: 暂停动画
2.9.动画模块连写格式
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
三、飘动的云朵动画的实现
最终实现效果如下
图片已转为在线地址，大家可以直接复制使用。