CSS3 如何实现飘动的云朵动画

目录

一、动画的定义

二、动画的基本使用

三、飘动的云朵动画的实现

---

一、动画的定义

     过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，不过对过渡动画理解后再不习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。

二、动画的基本使用

1.-animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

     通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

	   @keyframes animiationName{
​           keyframes-selector{
​               css-style;
​           }
​		}

2.-animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。  

3.-animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

值	执行速度
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4.-animation-delay 设置动画在启动前的延迟间隔。

time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

5.-animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

值	执行次数
n	一个数字，定义应该播放多少次动画
infinite	无限次执行

6.-animation-direction 指定是否应该轮流反向播放动画。

值	播放方向
normal	默认的取值, 执行完一次之后回到起点继续执行下一次
alternate	往返动画, 执行完一次之后往回执行下一次
reverse	反向执行

7.-animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none	不做任何改变
forwards	让元素结束状态保持动画最后一帧的样式
backwards	让元素等待状态的时候显示动画第一帧的样式
both	让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

8.-animation-play-state 告诉系统当前动画是否需要暂停

running: 执行动画

paused: 暂停动画

9.动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

三、飘动的云朵动画的实现

图片已转为在线地址，大家可以直接复制使用。