如何在悬停效果后保持悬停？

Question

所以我有这个悬停效果http://codepen.io/anon/pen/dMbEdq，但问题是动画完成后悬停消失。我需要那个悬停住宿。有什么建议吗？

 <div class="hover15">
    <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
 </div>

Answer 1

使用以下代码：

transition-duration: 100s;

使用以下代码，您可以将动画保留或保留一段时间。如果您想循环播放或点击@ click事件，请参阅 KeyFrames 。 但是你的问题并不清楚。所以我现在可以帮助你了。

使用像这样：

@keyframes hover {
 0% {
   // normal styles
 }
 100% {
   // hover styles
 }
}

.class {
 animation-name: hover;
 animation-duration: 1ms;
 animation-fill-mode: backwards;
 animation-play-state: paused;      
 }

.class:active,
.class:focus,
.class:hover {
   //hover style you define
 }

参考click here to see the effect

如果发现有用，请接受并赞成。