如何从css动画关键帧中获取图像，以便在完成后保留在页面上

Question

我只想让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>

​

Answer 1

animation-fill-mode: forwards;

此属性将使@-keyframes中的最后一个帧在完成后保持不变。

您可以在这里找到更多信息，MDN。