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

Question

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>

i think you are looking for this https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode `animation-fill-mode: forwards;` this will stop the animation on the last frame — Vitorino fernandes, Jan 25 '16 at 06:23
That did it! Thanks. Feel free to write an answer and I will approve it. — Becky, Jan 25 '16 at 06:28

score 3 · Accepted Answer · answered Jan 25 '16 at 06:30

3

animation-fill-mode: forwards;

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

You can find more information here MDN

answered Jan 25 '16 at 06:30

Vitorino fernandes

15,794
3
20
39

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

1 Answers1