0

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

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

4

2 回答 2

6

作为@Mr. 外星人回答说，过渡更喜欢这个，但既然你问了 - 可以保持动画中的最后一个状态。

你通过添加来做到这一点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;  }
}

如果您想了解“动画填充模式”属性，这是一个很好的资源。 http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property

于 2012-11-25T09:19:00.060 回答
2

我知道你在这里做什么，请改用transitionCSS

演示

.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

于 2012-11-25T08:15:30.773 回答