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

How to get an image from a css animation keyframe to remain on the page after complete

本文关键字：保留 css 动画 关键帧 图像 获取      更新时间：2023-09-26

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

相关文章：