關(guān)于animation-fill-mode:both
在9-9中設(shè)置both不應(yīng)該是最后變?yōu)榧t色嗎，執(zhí)行的結(jié)果卻是藍(lán)色，不明白
小黍
2016-12-23
4 回答
舉報(bào)
0/150
提交
取消
2016-12-27
backwards不是決定最終樣式的，它表示元素應(yīng)用動(dòng)畫(huà)時(shí)是否立即應(yīng)用動(dòng)畫(huà)的初始幀，forwards表示動(dòng)畫(huà)執(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;?
}
自己去感受 ?四個(gè)div 四個(gè)class
2017-01-02
嗯，你這次描述的很正確??！
2016-12-23
設(shè)置為both，包括設(shè)置了forwards和backwards，如果設(shè)置了forwards就會(huì)在動(dòng)畫(huà)執(zhí)行完后停止在最后一幀上，由于最后一幀是藍(lán)色，所以執(zhí)行結(jié)果就是藍(lán)色。