CSS动画

动画属性列表

1. @keyframes
2. animation-name
3. animation-duration
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
8. animation-fill-mode animation

1.@keyframes

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
例子

.changeColor{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 动画效果名称 */
    animation-name: changeColor;
    /* 动画执行时间 */
    animation-duration: 5s;
}
@keyframes changeColor {
    /*从哪里开始*/
    /* from {background-color: red;} */
    /* 到哪里结束 */
    /* to {background-color: rgb(255, 230, 0);} */
    /* 使用百分比 */
    0% {background-color: orangered;}
    25% {background-color: rgb(208, 255, 0);}
    50% {background-color: rgb(21, 255, 0);}
    75% {background-color: rgb(0, 255, 213);}
    100% {background-color: rgb(0, 183, 255);}
}

2.控制动画效果的各种属性

animation-name: example;指定执行的动画名字
animation-duration: 2s 属性定义需要多长时间才能完成动画
animation-delay: 2s 属性规定动画开始的延迟时间。
animation-iteration-count: 3 属性指定动画应运行的次数。 “infinite” 使动画永远持续下去
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

 1. normal - 动画正常播放（向前）。默认值 
 2. reverse - 动画以反方向播放（向后） 
 3. alternate -动画先向前播放，然后向后 
 4. alternate-reverse - 动画先向后播放，然后向前

animation-timing-function 属性规定动画的速度曲线。

 1. ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） 
 2. linear - 规定从开始到结束的速度相同的动画 
 3. ease-in- 规定慢速开始的动画 
 4. ease-out - 规定慢速结束的动画 
 5. ease-in-out - 指定开始和结束较慢的动画 
 6. cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

animation-fill-mode 属性规定目标元素的样式。

 1. none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
 2. forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和animation-iteration-count）。
 3. backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
 4. both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

开始时

结束时保持结束不变