悬停时的 CSS 旋转动画故障

如何解决悬停时的 CSS 旋转动画故障

我有一个关于 CSS 的问题。我编写了一个动画以在悬停时旋转。现在，当我将鼠标悬停在它上面时，它确实出现了很多故障。它只是一次又一次地开始旋转。有人可以帮忙吗。代码在这里：

#text {
            width: 300px;
            height: 150px;
            background-color: lightgray;
            border-left: 0px groove;
            border-top: 0px groove;
            border-radius: 10px;
            margin: auto;
            padding: 5px;
            transition: all 0.3s ease-in;
           
        }

         #text:hover {
            border-left: 10px groove;
            border-top: 10px groove;
            background-color: lightskyblue;
            transform: rotateY(360deg);
        } 

        #text::after {
            content: "Hover me";
            font-size: 30px;
            margin-left: 100px;
            color: black;
        }

        #text:hover::after {
            content: "If you want to know how to get started as a web developer,take a look at my youtube channel";
            margin: 0;
            font-size: 20px;
        }

<div id="text">
       
    </div>

解决方法

正如 Paulie_D 正确所述，您的 :hover 会触发动画，但会在您的鼠标离开 #text 元素时终止动画。所以它重置了。

有多种方法可以解决这个问题，比如这个例子来制作一个不移动但只触发动画的新容器元素。

.text {
  width: 100%;
  height: 150px;
  background-color: lightgray;
  border-left: 0px groove;
  border-top: 0px groove;
  border-radius: 10px;
  padding: 5px;
  transition: all 0.3s ease-in;
  margin-bottom: 20px;
}

.animated-card {
  margin: auto;
  width: 300px;
}

.animated-card:hover > .text {
  transform: rotateY(360deg);
}

.text:hover {
  border-left: 10px groove;
  border-top: 10px groove;
  background-color: lightskyblue;
}

.text::after {
  content: "Hover me";
  font-size: 30px;
  margin-left: 100px;
  color: black;
}

.text:hover::after {
  content: "If you want to know how to get started as a web developer,take a look at my youtube channel";
  margin: 0;
  font-size: 20px;
}

<div class="animated-card">
  <div id="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>

<div class="animated-card">
  <div class="text"></div>
</div>