day13 CSS3动画（animation）

CSS3 @keyframes 规则

@keyframes 规则是创建动画，在该规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

animation：所有动画属性的简写属性。

animation-name：规定 @keyframes 动画的名称。

animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function：规定动画的速度曲线。默认是 "ease"。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-delay：规定动画何时开始。默认是 0。

animation-iteration-count：规定动画被播放的次数。默认是 1。

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。

animation-direction：属性定义是否循环交替反向播放动画。
注意：如果动画被设置为只播放一次，该属性将不起作用。
normal：默认值。动画按正常播放。
reverse：动画反向播放。
alternate：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

@charset "UTF-8";
body {background-color: black;color: darkblue;font-size: 18px;
}#ani1 {position: absolute;width: 100px;height: 100px;background-color: lightblue;animation-name: anione;animation-duration: 5s;/* animation-delay: 2s; */animation-direction: alternate;animation-play-state: running;animation-iteration-count: infinite;
}@keyframes anione {0% {background-color: pink;}25% {background-color: lightblue;width: 25%;}50% {background-color: lightgreen;width: 50%;}75% {background-color: plum;width: 75%;}100% {background-color: lightcoral;width: 100%;}}