没有看懂啊

设置属性就是保持状态，如图保持在315度。

可是有个元素开始时的状态是不是没有用，不设置不也是开始时状态none

早知今日何必当初 2019-05-03

源自：CSS3动画 2-23 animation-fill-mode

收起

3回答

Miss路回答被采纳获得+3积分 2019-05-06 12:06:45

同学，你好。你测试一下这两端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation-fill-mode</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
/*    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;*/
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation-name: circle_middle;
            animation-name: circle_middle;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
/*    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;*/
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation-name: circle_outer;
            animation-name: circle_outer;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
/*    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;*/
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(90deg);   }
    to   { transform: rotateX(315deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(60deg);   }
    to   { transform: rotateY(315deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(45deg);   }
    to   { transform: rotateZ(315deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

和

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation-fill-mode</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation-name: circle_middle;
            animation-name: circle_middle;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation-name: circle_outer;
            animation-name: circle_outer;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(90deg);   }
    to   { transform: rotateX(315deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(60deg);   }
    to   { transform: rotateY(315deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(45deg);   }
    to   { transform: rotateZ(315deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

你看一下这两个代码是有差距的，一开始都是0的话，是看不出差距的，但是修改了初始值不是0的话就看出来了。

如果帮助到了你，欢迎采纳！

祝学习愉快！

收起回答

向学习者学习 #1

感谢！!!

2023-05-24 08:48:10

Victor19950925 2019-05-10 15:20:58

比如之前的我们做的一个编程训练 2-13

拿这个例子来说，如果没有设置animation-fill-mode的话，一次循环结束后，你会发现弹框又不见了，回到了一开始的位置（屏幕外），如果你设置了 animation-fill-mode：forwards的话，你会发现，最后弹框没有消失，他停留在了界面内，保持了一次循环后，最后一帧的样式属性。你可以再研究下

收起回答