CSS动画

CSS动画

过渡

transition 属性 过渡 可以为一个元素在不同样式之间变化自动添加'补间动画'
	transition : width 1s linear 0s 
				 需要过渡的属性 | 动画时长 | 变化速度曲线,linear匀速 | 动画开始的延迟时间
				 transition-property | transition-duration | transition-timing-function | transition-delay
				 四个属性可以如上合并设置,也可以单独设置
ps:
	从ie10开始兼容,移动端兼容良好
	网页动画特效由js定时器逐步改为css3过渡 -> 动画更细腻,内存开销小
	
可以参与过渡的属性:
	所有数值类型的属性,都可以参与过渡,比如width,height,left,top,border-radius
	背景颜色和文字颜色都可以被过渡
	所有变形(包括2D和3D)都能被过渡
	
需要过渡的属性也可以写为all,表示所有属性都参与过渡

过渡的缓动效果
	transition-timing-function
		ease | linear | ease-in | ease-out | ease-in-out
		两头慢,中间快 | 匀速 | 逐渐加快 | 逐渐变慢 | 两头慢,中间快,更为平缓
		也可以根据贝塞尔曲线设置 cubic-bezier(0.1,0.7,1.0,0.1)
		
贝塞尔曲线生成参考网址 : https://cubic-bezier.com/，可自定义动画变化速率

动画的定义和调用

@keyframes 定义动画 keyframes表示关键帧
animation 调用动画
	动画名字 | 总时长 | 变化速度曲线 | 动画开始的延迟时间 | 执行次数
														alternate | forwards | infinite | 阿拉伯数字
														动画的偶数次自动逆向执行 | 动画停止在最后结束状态 | 动画永久执行 | 动画执行次数

多关键帧动画