H5中CSS3动画属性详解

历经昨晚对3D切换效用的表明 , 他们晓得两个好的技师 ,就要著重采用者新体验和可视化 ,所以是不是让采用者有更快的新体验呢?

那是透过动画电影将他们的动态网页，变为具备雅致性，为他们的介面加进性格.

上面让他们而言讹传动画电影的同时实现

动画电影（animation）是CSS3中具备革命性的特点众所周知，可透过增设数个结点来准确掌控两个或几组动画电影，常见来同时实现繁杂的动画电影效用。

相比较过渡阶段，动画电影能同时实现更多变动，更多控制，已连续弹出等效用。

动画电影的基本上采用

制做动画电影分成三步：

(1)先定义动画电影

(2)再采用（调用）动画电影(哪个盒子要加动画电影,就调用对应的动画电影名称)

动画电影序列

0% 是动画电影的开始，50% ……. 100% 是动画电影的完成。这样的规则是动画电影序列。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画电影效用。

动画电影是使元素从一种样式逐渐变动为另一种样式的效用。您能改变任意多的样式任意多的次数。

一般他们用百分比来规定变动发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

动画电影常见特性

1.@keyframes 规定动画电影

2.animation (动画电影的简写) 所有动画电影特性的简写特性，除了animation-play-state特性

3.animation-name 增设要采用的动画电影名animation-name:xxx;

4.animation-duration 增设动画电影播放的持续时间默认是0 animation-duration:3s

5.animation-timing-function 规定动画电影的速度曲线，默认是“ease”(linear：匀速 ease：慢-快-慢 ease-in：慢-快 ease-out：快-慢 )

6.animation-delay 规定动画电影何时开始，默认是0 animation-delay: 0s;

7.animation-iteration-count 增设动画电影播放的循环次数 animation-iteration-count: 2 ; infinite 为无限循环 reverse 反向运行alternate 正-反-正

8.animation-direction 规定动画电影是否在下一周期逆向播放，默认是“normal“,alternate逆播放

9.animation-play-state 规定动画电影是否正在运行或暂停。默认是”running”,还有”paused”。

10.animation-fill-mode 增设动画电影在等待或者结束的时候的状态 (forwards：动画电影结束后，元素样式停留在 100% 的样式 backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式 both： 同时增设了 forwards和backwards两个特性值)

复合写法

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

animation：动画电影名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画电影起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

注意:

简写特性里面不包含 animation-play-state

暂停动画电影：animation-play-state: puased; 经常和鼠标历经等其他配合采用

想要动画电影走回来 ，而不是直接跳回来：animation-direction ： alternate

盒子动画电影结束后，停在结束位置： animation-fill-mode ： forwards

数个动画电影写法

两个盒子加数个动画电影时用逗号隔开

animation:

name duration timing-function delay iteration-count direction fill-mode，

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

上面让这个图片动起来

CSS3动画电影特性的基本上操作就这些啦! 希望大家多多关注 ,一起学习交流 .