css3 – 不能停止css动画在最后一个关键帧后消失

前端之家收集整理的这篇文章主要介绍了css3 – 不能停止css动画在最后一个关键帧后消失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的css动画,我想玩,然后停止在最后一帧完全显示图像.但是目前在这一刻它的戏剧性似乎恢复了一帧,所以santas的脸消失了.

如何让它播放一次,然后停止在最后一个关键帧或显示图像,而不会再次衰落?

http://jsfiddle.net/uy25Y/

  1. <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">
  2.  
  3. .santaface{
  4. opacity:0;
  5. position: absolute;
  6. left:40%; top:20%; width:20%;
  7. -webkit-animation-name: santaappear;
  8. -webkit-animation-duration: 13s;
  9. }
  10.  
  11.  
  12. .santaface{-webkit-animation-delay:2s;animation-delay:2s;}
  13.  
  14. @-webkit-keyframes santaappear {
  15. 0% { opacity:0;}
  16. 96% {opacity:1;}
  17. }

解决方法

您需要动画填充模式:转发才能防止这种情况发生.

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

jsFiddle example – 它的工作原理如预期.

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

  1. @keyframes santaappear {
  2. 96% {
  3. opacity:1;
  4. }
  5. 100% {
  6. opacity:1;
  7. }
  8. }

您也可以组合96%和100%.

  1. @keyframes santaappear {
  2. 96%,100% {
  3. opacity:1;
  4. }
  5. }

由于您正在使用多个动画属性,请使用animation shorthand

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

哪个是:

  1. animation: santaappear 13s 2s forwards;
  2. -moz-animation: santaappear 13s 2s forwards;
  3. -webkit-animation: santaappear 13s 2s forwards;

在演示中,我为-moz / -webkit添加了供应商前缀.除了这些,你应该有一个没有前缀的书面.关键帧也是如此.

猜你在找的CSS相关文章