我只想iteration-count
运行一次,但之后,我希望我的图像无限期地保留在页面上。
有没有办法用 css 完成此操作,或者我需要应用 javascript 方法?
#contact-success-animation {
width: 100px;
height: 100px;
position: relative;
margin: auto auto;
-webkit-animation-name: success-animation; /* Chrome, Safari, Opera */
-webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-direction: normal; /* Chrome, Safari, Opera */
animation-name: success-animation;
animation-duration: 15s;
animation-iteration-count: 1;
animation-direction: normal;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes success-animation {
0% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
33% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
66% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
100% {background-image: url("); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
}
/* Standard syntax */
@keyframes success-animation {
0% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
33% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
66% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
100% {background-image: url(""); background-repeat: no-repeat;
background-size: 100% auto; height: 100px; width: 100px;}
}
<div id="contact-success-animation"></div>
animation-fill-mode: forwards;
此属性将在完成后保留 @ 关键帧中的最后一帧
你可以在这里找到更多信息 MDN