伪元素（::之前）徘徊在动画中继续前进

Question

我会帮助一些非常具体的东西（我想）

我在伪元素之前有“ li”块 ＆lt; li id =“ phone”＆gt; xx xx xx xx xx xx xx＆lt;/li＆gt;，

li::before
  display: block                        
  content: ""
  width: 17px
  height: 17px
  margin-right: 8px
  position: relative
  align-items: center
  background: blue

所以当“ li”悬停在悬停时，我会为伪块而动画：

li:hover::before
  animation-name: hover-wriggle
  animation-duration: 2s
  animation-fill-mode: forwards
  animation-direction: alternate-reverse
  animation-iteration-count: infinite
  animation-timing-function: ease-in-out

@keyframes hover-wriggle
  0%
    transform: rotate(50deg)
  50%
    transform: rotate(-50deg)
  100%
    transform: rotate(0deg)

当我悬停在“ li”时，移动，当我退出时，我希望他们继续以1秒为单位进行动画？这是可能的（没有JS！）？

谢谢 ！快乐编码＆lt; 3