hover对设置了animation动画的伪元素不生效问题求助

问题原因 #

::after和::before伪元素独立绑定了rotate动画，animation-play-state属性默认不会自动从父元素继承，你仅给.task1主元素的hover状态设置了暂停，伪元素的动画状态不受影响，因此会出现主元素停转、伪元素仍在转动的问题。

解决方案 #

将原有的.task1:hover样式规则修改为覆盖主元素和两个伪元素即可：

.task1:hover,
.task1:hover::after,
.task1:hover::before {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

如果想要简化代码方便后续维护，也可以用继承的写法：

.task1 {
  /* 原有其他样式保持不变 */
  animation-play-state: running;
}
.task1::after, .task1::before {
  /* 原有其他样式保持不变 */
  animation-play-state: inherit;
}
/* 此时hover只需修改父级属性即可同步控制三个元素的动画状态 */
.task1:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

内容的提问来源于stack exchange，提问作者Houda Salah