CSS：悬停时开始动画，然后再也不会停止

Question

我是 CSS-Animation 的新手，所以也许对您来说答案很简单。但是我在这里找不到答案。

我想要一个元素在悬停时开始动画，然后永不结束。这是一个艺术项目，因为实际上它没有任何意义。

我得到的是：一个小圆圈，悬停时它开始变得越来越大。而且我希望该动画无休止地继续（或者通过过渡无休止地假装它：100000s 或类似的东西）。

知道如何管理吗？

我得到的是这个：

.circle{
  background-color: orange;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  margin-top: 10%;
  margin-left: 50%;
  transition: 1000s;
}

.circle:hover{
  transform: scale(8000);
}

.circle:hover{
  transform: scale(8000);
}

<div class="circle"></div>

非常感谢你。

Answer 1

我将 .circle:hover 更改为名为“circleAnimation”的新 class。然后，我给圆圈一个 onmouseenter 事件，将其添加到 class（因为 JavaScript 只有一行，所以我将它直接输入到 onmouseenter 事件的值中）。

结果是这样的：

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.circleAnimation {
    transform: scale(8000);
}

<div class="circle" onmouseenter="event.target.classList.add('circleAnimation')"></div>

希望对您有所帮助！

Answer 2

我觉得可以帮到你。

.circle {
    background-color: orange;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    margin-top: 10%;
    margin-left: 50%;
    transition: 1000s;
}

.animate {
    transform: scale(8000);
}

<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>

您也可以使用 onmouseover 代替 onmouseenter。

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .circle{
            background-color: orange;
            border-radius: 10px;
            width: 20px;
            height: 20px;
            margin-top: 10%;
            margin-left: 50%;
            transition: 1s;
        }
    </style>
</head>
<body>
    <div class="circle" onmouseover="changeScale(this)"></div>
    <script>
        function changeScale(circle){
            circle.style.transform = 'scale(80)';
        }
    </script>
</body>
</html>

CSS：悬停时开始动画，然后再也不会停止

CSS: Start Animation on hover, then never stop again

html

css

animation

transition

hover