html - 悬停后如何继续CSS动画？

Question

我制作了一个带有动画 img 的按钮。因此，当您将鼠标悬停在上面时，汽车会从左侧行驶，然后停在中间。当你悬停时 - 汽车向右行驶。 我做了一个 fiddle : https://jsfiddle.net/ufwyjd0o/

.button{
  height:150px;
  width: 150px;
  background-color:#468189;
  margin: 100px;
  border-radius: 100%;
  box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6);
  animation: size 1.5s infinite alternate;
  position: relative;
}

@keyframes size {
    0%   {transform: scale(1.0);
          box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6); }
    100% {transform: scale(1.05);
          box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4); }
}

.icon img{
  height:75px;
  width:auto;
  position: absolute;
  top: 40px;
  animation: driveout 1s cubic-bezier(.52,.02,.31,.99) both;
  transform: 1s;
}

@keyframes drive {
    0%   {transform: translate3d(-60px,0,0)}
    5%  {transform: translate3d(60px,0,0)}  
    10% {transform: translate3d(40px,0,0);}
}

@keyframes driveout {
    0%   {transform: translate3d(40px,0,0)} 
    100% {transform: translate3d(200px,0,0)}
}

.button:hover .icon img {
  animation: drive 10s  cubic-bezier(.52,.02,.31,.99) normal;
  animation-play-state: pause;
  display:block;
}

Answer 1

如果您想要在 hoveron 和 hoverout 上使用不同的动画(与 javascript 中的 mouseover 和 mouseout 相同)，那么您最好的选择就是这样。

.button {
 // what you want to happen on hoverout
 animation: // your hoverout animation
}

.button:hover {
 // what you want to happen on hoverover
 animation: // your hoverover animation.
}