是否可以在 75% 时停止 CSS3 动画,并且不应该以 0% 再次显示或至少以 75% 延迟 10 秒?就像现在动画完成时一样,它显示在位置 0%
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
}
<div></div>
我对动画进行了一些更改,您需要做的就是将75%
动画复制两次,然后使用animation-fill-mode
属性并将其设置为forwards
以在最后一个位置停止动画。
演示
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
/* add these properties */
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
/* add the below one */
100% {background-color:green; left:0px; top:200px;}
}