javascript - 加载和悬停时的 css 动画

Question

如何在页面加载时启动一个 css 动画，并通过悬停在同一元素上触发相同的动画。在页面加载时，动画将迭代 1 次。一旦它停止，我将能够通过悬停反复触发它。我试图在 different CSS animation on load and on hover 处修改代码但我无法复制它。我还拼凑了以下内容，但只有加载动画有效，悬停无效:

img {
    -webkit-animation: anim 10s linear;
    -webkit-animation-iteration-count: 1;    
    animation: anim 10s linear;
    animation-iteration-count: 1; 
    height: 50px;
    width: 50px;
}

img:hover {
    -webkit-animation: anim 10s infinite linear ;           
    animation: anim 10s infinite linear;        
    height: 50px;
    width: 50px;
}

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

@keyframes anim {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
}

根据 Vitorino Fernandes 关于使用父 div 进行悬停的建议，我让它工作了:

img {
    -webkit-animation: anim 10s linear;
    -webkit-animation-iteration-count: 1;    
    animation: anim 10s linear;
    animation-iteration-count: 1;

    height: 50px;
    width: 50px;
}

div:hover {
    -webkit-animation: anim 10s infinite linear;      
    animation: anim 10s infinite linear;    
    height: 50px;
    width: 50px;
}

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

@keyframes anim {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
}

html:

<div>
    <img src="testpic.jpg"/>
</div>

Answer 1

可以为parent添加hover事件，为img添加load事件

img {
  -webkit-animation: anim 10s linear;
  -webkit-animation-iteration-count: 1;
  animation: anim 10s linear;
  animation-iteration-count: 1;
  height: 50px;
  width: 50px;
}
div:hover {
  display: inline-block;
  -webkit-animation: anim 10s infinite linear;
  -webkit-animation-iteration-count: 1;
  animation: anim 10s linear;
  animation-iteration-count: 1;
  height: 50px;
  width: 50px;
}
@-webkit-keyframes anim {
  0%, 100% {
    -webkit-transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(360deg);
  }
}

<div>
  <img src="https://via.placeholder.com/350x150" />
</div>