无法停止css动画在最后一个关键帧之后消失

问题描述

我有一个简单的css动画，我想播放，然后停止在最后一帧完全显示图像。但现在它播放的时候似乎恢复到框架，所以圣诞老人的脸消失。

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?

    <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;}
        }

推荐答案

您需要 animation-fill-mode：forward 才能防止这种情况发生。

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

此外，您需要以1的不透明度结束，因此最后一帧必须具有不透明度1。

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.

您也可以通过删除 0％来缩短关键帧，因为这在初始状态已经给出。

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;
    }
}

您也可以结合 96 ％和 100％。

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

由于您使用多个动画属性， a href =https://developer.mozilla.org/en-US/docs/Web/CSS/animation =noreferrer> 动画速记 ：

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>`

这将是：

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

在演示中，我添加了 -moz / -webkit 。除了这些，你应该有一个没有前缀。关键帧也一样。

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.

这篇关于无法停止css动画在最后一个关键帧之后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！