每当鼠标停留在元素上，CSS translateX()动画就会重置

Question

嗨，我只做CSS动画，我需要在这里的卡片上显示一个块，这是0%和100%的动画转换，用:悬浮来激活自己。

0% 100%

我的需要是使动画停留在屏幕上，只要我的鼠标是在元素上。

TYsm

Answer 1

使用此代码进行修整

div {
  width: 100px;
  height: 100px;
}

div:hover{
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {width: 0%; height:0%}
  to {width: 100%; height: 100%}
}