动画突然结束

Question

如果我在悬停时应用了动画，那么如果我将鼠标移出链接，则动画会突然终止。如果完成，有什么方法可以让它？

a:hover{
  display: block;
  width: 30px;
  height: 30px;
  animation: test .5s infinite;
}

Answer 1

试试这个

a:hover{
animation-name:your_animation_name;/*any name of your animation*/
animation-duration:1s;/*animation playing duration given by seconds*/
animation-timing-function:ease-in;/*play mehtods eg:-ease in , ease-in-out*/
animation-fill-mode:forwards;/*animation stop at to{} code. No come back style*/
animation-delay:1s;/*animation should start after... given by seconds*/
}

@keyframes your_animation_name{
from{}/*Where the animation begging*/
to{display:block;/*if you want add more codes insert here*/}/*final animation style*/

Answer 2

我害怕在徘徊之后完成动画不能用纯css完成。但你可以像jQuery一样添加mouseenter函数：

$("a").mouseenter(function(){
   $(this).animate({
      <your animation>
});