CSS3 动画的基本使用（包括动画的定义（@kyframs)和动画的调用（animation)）以及动画的常用属性

CSS3 动画概述

• CSS3 动画可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

动画的基本使用

• 制作动画分以下两步进行：

1. 定义动画

/*用keyframes定义动画，代码如下：*/
@keyframes 动画名称 {
	0%{
		width: 100px;
	}
	100%{
		width: 1000px;
	}
}

/*注意：
1、0%是动画的开始，100%是动画的结束，这样定义的规则就是动画序列；
2、动画序列的百分比一定要是整数；
3、在动画序列中，可以用百分比来规定变化发生的时间，也可以用关键词"form"和"to"，它等同于0%和100%*/

2. 调用动画

/*哪个元素调用了动画，就必须在哪个元素上添加以下的代码：*/
/*调用动画*/
animation-name: 动画名称;
/*动画持续的时间*/
animation-duration: 动画持续时间;

动画的常用属性

• CSS3 动画的常用属性如下表：

属性	说明
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animatin-play-state属性； 格式一般为：animatin: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 （一般按这个顺序书写比较好，因为还是有一些顺序问题的，比如：持续时间和何时开始就不能颠倒位置）
animation-name	规定@keyframes动画的名称（必写）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必写）
animation-timing-function	规定动画的速度曲线，默认是"ease"（动画以低俗开始，然后加快，在结束前变慢）， 其他属性值有：linear、ease-in、ease-out、ease-in-out 以及steps()（表示指定了时间函数中的间隔数量，即动画效果分几步完成）
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1； 当设置为infinite，表示无限循环的意思
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，alternate为逆向播放
animation-play-state	规定动画是否正在执行或暂停，默认是running，paused为暂停播放； 经常和鼠标经过等配合使用
animation-fill-mode	规定动画结束后的状态，默认值是backwords，表示回到起始位置； forwords则表示保持动画结束时的位置

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！