css animation

动画(animation)

transition：过渡动画，必须要用户触发才能开始执行，例如hover效果；
animation：补间动画，可以让元素自身主动调用一个动画，不需要用户动作；

//声明动画语法
@keyframes  nn(动画名称) {
	from {
		//开始状态
		width:50px；
		height: 50px;
		background-color: red;
	}
	to {
		//结束状态
		width: 300px;
		height: 300px;
		background-color: blue;
	}
}
.box {
	animation: nn 5s ease 1s infinite alternate backwards;
}

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

属性	描述
@keyframes	定义动画
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的时间。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。还有 infinite
animation-direction	动画是否在下一周期逆向地播放。默认是 “normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。还有“paused”
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards
animation	所有动画属性的简写属性

@keyframes 动画名称 {
     0% {
         //开始节点
     }
     50% {
         //中间节点
     }
     100% {
         //结束节点
     }
 }
//调用动画的方式与之前相同。

https://www.runoob.com/cssref/css3-pr-animation.html