无法停止最后一个关键帧后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 example不透明 - 它的工作原理就像现在的预期。

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

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

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

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

由于您使用多个动画属性，使用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。除了这些，你应该有一个没有前缀的书面。关键帧也一样。