如何在第一个周期结束时暂停CSS关键帧动画？

Question

我正在研究我的第一个CSS关键帧动画,并想知道如何在完成第一次运行后暂停动画.你可以在这里查看我的网站:http://www.tommaxwell.me,底部的灰色引号有一个你可以看到的悬停动画.但是,一旦动画结束,它就会重置.我应该如何停止它以使其在完成时保持动画的最终状态？

我知道在这种情况下使用关键帧动画是一种蹩脚和不必要的,但我真的只是测试关键帧,并将在以后更好地使用它.:)

Answer 1

作为@Mr.Alien回答说,转换是喜欢这个,但是因为你问过 - 可以在动画中维持最后一个状态.

你这样做是通过添加 animation-fill-mode: forwards;

这是一个演示

这是我的例子中的代码:

HTML

<div class="text">Hover here</div>?

CSS

.text {
  color: blue;  
}

.text:hover {
    -webkit-animation: color 1.0s ease-in forwards;
       -moz-animation: color 1.0s ease-in forwards;
         -o-animation: color 1.0s ease-in forwards;
            animation: color 1.0s ease-in forwards;    
}

@-webkit-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-moz-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-o-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

如果您想了解'animation-fill-mode'属性,这是一个很好的资源. http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property