07-动画（animation）

动画

语法

animation: move 3s linear 0s 1 normal none;
animation: 动画的名称 时间 运动曲线 延迟开始时间 播放次数 是否反向播放
是否运用结束的样式 动画是否运行或暂停;

属性	作用	属性值
animation-name	指定要绑定到选择器的关键帧的名称	name值需要绑定到选择器上
animation-duration	动画指定需要多少秒或毫秒完成	直接填时间 1s，2s
animation-timing-function	设置动画将如何完成一个周期	linear,ease,ease-in,ese-out-ease-in-out
animation-delay	设置动画在启动前的延迟间隔	直接填想延迟的时间
animation-iteration-count	定义动画的播放次数	直接填数字或者infinite无限播放
animation-direction	指定是否应该轮流反向播放动画	normal(默认值),reverse(反向播放),alternate(来回播放),alternate-reverse(回来播放懂得都懂)
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式	none(默认，结束播放不会使用动画的样式)forwards(动画结束，应用动画的值)both(两种样式都使用)
animation-play-state	指定动画是否正在运行或已暂停	paused,running（手动暂停或启动）

@keyframes 创建动画

语法

	@keyframes name{
	 			/* from{
					width: 200px;
					background-color: pink;
				}
				to{
					background-color: aqua;
					height: 500px;
					width: 500px;
				} */
				0% {
					width: 200px;
					background-color: pink;
				}
				25% {
					background-color: aqua;
					height: 500px;
					width: 500px;
				}
				50% {
					background-color: orange;
					height: 500px;
					width: 500px;
				}
				100% {
					background-color: green;
					height: 500px;
					width: 500px;
				}
			}