关于animation-fill-mode:both
在9-9中设置both不应该是最后变为红色吗,执行的结果却是蓝色,不明白
在9-9中设置both不应该是最后变为红色吗,执行的结果却是蓝色,不明白
2016-12-23
@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
举报