Can't stop css animation disappearing after last key frame

问题

I've got a simple css animation that I'd like to play and then stop on the last frame fully displaying the image. But currently at the moment it plays then seems to revert back to frame one so the santas face disappears.

How can i make it play through once then stop on the last key frame or display the image without it fading out again?

http://jsfiddle.net/uy25Y/

    <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">

     .santaface{
          opacity:0;
          position: absolute;
          left:40%; top:20%; width:20%;
            -webkit-animation-name: santaappear;
            -webkit-animation-duration: 13s;
            }


        .santaface{-webkit-animation-delay:2s;animation-delay:2s;}

        @-webkit-keyframes santaappear {
            0% { opacity:0;}
               96% {opacity:1;}
        }

回答1:

You need animation-fill-mode: forwards to prevent this from happening.

Additionally, you need to end with an opacity of 1, therefore the last frame must have an opacity of 1.

jsFiddle example - it works as expected now.

You can also shorten your keyframe by removing 0%, as this is already given in the initial state.

@keyframes santaappear {
    96% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

You could also combine 96% and 100%.

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

Since you are using multiple animation properties, use the animation shorthand:

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`

Which would be:

animation: santaappear 13s 2s forwards;
-moz-animation: santaappear 13s 2s forwards;
-webkit-animation: santaappear 13s 2s forwards;

In the demo, I added vendor prefixes for -moz/-webkit. In addition to these you should have one written without a prefix. Same goes for the keyframes.

来源：https://stackoverflow.com/questions/20274230/cant-stop-css-animation-disappearing-after-last-key-frame

标签

css3

css-animations