Question

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

我知道在这种情况下使用关键帧动画有点蹩脚和不必要，但我真的只是测试关键帧，并将在以后更好地使用它。：）

Answer 1

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

您可以通过添加animation-fill-mode: forwards;

来完成此操作

这是demo

以下是我的示例中的代码：

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

Answer 2

我知道你在这做什么，使用CSS transition而不是

Demo

.class {
   color: #ff0000;
   transition: color 2s;
   -moz-transition: color 2s; /* Firefox 4 */
   -webkit-transition: color 2s; /* Safari and Chrome */
   -o-transition: color 2s; /* Opera */
}

.class:hover {
   color: #00ff00;
}

您无法保留文本的悬停状态，因为您需要使用JavaScript

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

2 个答案: