CSS3-动画

CSS3-动画

动画( animation)是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画制作分两步：

• 先定义动画
• 再调用动画

1、用 keyframes 定义动画（类似定义类选择器）

@keyframes move {
            0% {
                width: 200px;
            }
            100% {
                width: 200px;
            }
        }

2.元素使用动画

div {
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin: 100px auto;
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间*/
	animation-duration:持续时间;
}

3.动画序列

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

4.动画常用属性

5.动画简写属性

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

	
	animation: myfirst 5s linear 2s infinite alternate;
	

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

6.速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

*注意：steps 就是分几步来完成动画，有了 steps 就不要再写 ease 或者 linear 了