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

Question

我有一个简单的css动画,我想玩,然后停在最后一帧完全显示图像.但目前它正在播放的那一刻似乎又回到了第一帧,因此圣诞老人的脸上消失了.

如何让它播放一次然后停在最后一个关键帧上或显示图像而不再消失？

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

Answer 1

你需要animation-fill-mode: forwards防止这种情况发生.

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

jsFiddle示例 - 它现在按预期工作.

您还可以通过删除来缩短关键帧0%,因为这已在初始状态中给出.

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

您还可以结合96%和100%.

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

由于您使用的是多个动画属性,请使用动画速记:

<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.除了这些,你应该有一个没有前缀的书面.关键帧也是如此.