關于animation-fill-mode:both
在9-9中設置both不應該是最后變為紅色嗎，執行的結果卻是藍色，不明白
小黍
2016-12-23
4 回答
舉報
0/150
提交
取消
2016-12-27
backwards不是決定最終樣式的，它表示元素應用動畫時是否立即應用動畫的初始幀，forwards表示動畫執行完后停止在最后一幀的位置，最后一幀是什么樣式，結果就是什么樣式，明白？
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
嗯，你這次描述的很正確??！
2016-12-23
設置為both，包括設置了forwards和backwards，如果設置了forwards就會在動畫執行完后停止在最后一幀上，由于最后一幀是藍色，所以執行結果就是藍色。