总结下过渡+动画

过度
过渡(transition)：
概念：就是用于设定一个元素（盒子）在两个不同状态（常规和:hover）的情况下，从一个状态变化到另一个状态的过程中以“渐变”的方式进行变换。

单个属性：
transition-property：想要设置过渡的属性名；（比如：transform, width, height, backgroud, color, ）
transition-duration: 过渡的时间长度；
transition-timing-function: 过渡方式（linear, ease, ease-in, ease-out, ease-in-out）；
transition-delay: 延迟时间；
综合属性
transition：
第1个过渡属性的设置，
第2个过渡属性的设置，
.....
；
每个综合属性的写法： 想要设置过渡的属性名  过渡的时间长度  过渡方式  延迟时间


动画
@keyframes 动画名{
	0%{}
	100%{}
}

animation-name:动画名称;
animation-duration:时长;
animation-timing-function:播放方式（linear,ease,ease-in,ease-out,ease-in-out）;
animation-delay:延迟时间;
animation-direction:方向（normal,reverse,alternate,alternate-reverse）;
animation-iteration-count:次数(infinite无限);
animation-fill-mode:填充模式(就是停止是停在那个时间点);
animation-play-start:播放状态(runing,paused);

animation综合属性：
animation：
第1个动画设置，
第2个动画设置，
.....
；
每个动画设置写法： 动画名  播放时长  动画方式  延迟时间  次数  方向 ....；