animation-fill-mode 的both怎么理解

你好，animation-fill-mode 规定对象动画时间之外的状态，有四个值：

》none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样。

》forwards 表示将动画元素设置为整个动画结束时的状态。

》backwards 明确设置动画结束之后回到初始状态。

》both 表示设置为结束或者开始时候的状态。

注意：forwards值，表示在动画结束时，停在最后一个关键帧，而不会回到动画的第一帧。如没这个设置，会回到动画初始状态。backwards值，在有延迟动画开始时，在延迟的时间内状态，是动画的第一帧状态。

测试如下代码：

css样式：

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative; 
    animation:mymove 3s;
    animation-delay:5s;
    animation-fill-mode:backward;/*forwards*/ 
    /* Safari 和 Chrome */
    -webkit-animation:mymove 3s;
    -webdit-animation-delay:5s;
    -webkit-animation-fill-mode:backwards;/*forwards*/
} 
@keyframes mymove
{
    from {transform:rotate(7deg);}
    to {transform:rotate(150deg);}
} 
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
    from {transform:rotate(7deg);}
    to {transform:rotate(150deg);}
}

HTML代码：

<div></div>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>

 测试：1. 先将animation-fill-mode:backward; 属性去掉，观察动画开始前和结束状态。

          2. 添加上animation-fill-mode:backward;属性，在观察动画开始前和结束状态。

          3. 将animation-fill-mode:backward;改为animation-fill-mode:forwards;，在观察动画开始前和结束状态。

          4. 将animation-fill-mode: 的值改为 both； 就相当于有forwards 和backward 的状态。

希望对你有帮助，祝学习愉快，欢迎采纳。