關(guān)于animation-fill-mode:both
在9-9中設(shè)置both不應(yīng)該是最后變?yōu)榧t色嗎，執(zhí)行的結(jié)果卻是藍(lán)色，不明白
小黍
2016-12-23
4 回答
舉報
0/150
提交
取消
2016-12-27
backwards不是決定最終樣式的，它表示元素應(yīng)用動畫時是否立即應(yīng)用動畫的初始幀，forwards表示動畫執(zhí)行完后停止在最后一幀的位置，最后一幀是什么樣式，結(jié)果就是什么樣式，明白？
2017-04-24
@keyframes redToBlue{
? from{
? ? background: red;
? }
? 20%{
? ? ? background:green;
? }
? 40%{
? ? ? background:lime;
? }
? 60%{
? ? ? background:yellow;
? }
? to{
? ? background:blue;
? }
}
.div1 {
? width: 50px;
? height: 50px;
? background: orange;
? margin: 20px auto;
? animation-name:redToBlue;
? animation-duration: 5s;
? animation-timing-function: ease;
? animation-delay: 2s;
? animation-fill-mode: none;?
}
.div2 {
? width: 50px;
? height: 50px;
? background: orange;
? margin: 20px auto;
? animation-name:redToBlue;
? animation-duration: 5s;
? animation-timing-function: ease;
? animation-delay: 2s;
? animation-fill-mode: forwards;?
}
.div3 {
? width: 50px;
? height: 50px;
? background: orange;
? margin: 20px auto;
? animation-name:redToBlue;
? animation-duration: 5s;
? animation-timing-function: ease;
? animation-delay: 2s;
? animation-fill-mode: backwards;?
}
.div4 {
? width: 50px;
? height: 50px;
? background: orange;
? margin: 20px auto;
? animation-name:redToBlue;
? animation-duration: 5s;
? animation-timing-function: ease;
? animation-delay: 2s;
? animation-fill-mode: both;?
}
自己去感受 ?四個div 四個class
2017-01-02
嗯，你這次描述的很正確?。?/p>
2016-12-23
設(shè)置為both，包括設(shè)置了forwards和backwards，如果設(shè)置了forwards就會在動畫執(zhí)行完后停止在最后一幀上，由于最后一幀是藍(lán)色，所以執(zhí)行結(jié)果就是藍(lán)色。