Becky Becky - 4 months ago 19
CSS Question

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

I am only wanting

iteration-count
to run once, but afterwords, I would like my image to remain on the page indefinitely.

Is there anyway to accomplish this with css or will I need to apply a javascript method?



#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

animation-fill-mode: forwards;

This property will keep the last frame from the @-keyframes once its complete

You can find more information here MDN

Comments