如何在转场后制作动画

Question

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.word {
  transition: 0.3s;
  opacity: 1;
}

p,
a {
  color: #fff;
  font-size: 5vw;
  font-family: "Rubik", sans-serif;
  text-transform: uppercase;
  margin: 0;
  text-decoration: none;
  letter-spacing: 2px;
}

.line {
  display: flex;
  justify-content: space-between;
}

.fancy {
  cursor: pointer;
}

#txt:has(.fancy:hover) .word:not(.fancy:hover) {
  opacity: 0.2;
}

.letter {
  display: inline-block;
  transition: all 0.6s ease;
}

.fancy:hover .letter:nth-child(1) {
  transform: translate(-40%, 60%) rotate(8deg);
}

.fancy:hover .letter:nth-child(2) {
  transform: translate(20%, -60%) rotate(0deg);
}

.fancy:hover .letter:nth-child(3) {
  transform: translate(-70%, 80%) rotate(-3deg);
}

.fancy:hover .letter:nth-child(4) {
  transform: translate(-30%, -45%) rotate(3deg);
}

.fancy:hover .letter:nth-child(5) {
  transform: translate(0%, 20%) rotate(7deg);
}

.fancy:hover .letter:nth-child(6) {
  transform: translate(10%, 30%) rotate(2deg);
}

.fancy:hover .letter:nth-child(7) {
  transform: translate(20%, 60%) rotate(3deg);
}

.fancy:hover .letter:nth-child(8) {
  transform: translate(-20%, 30%) rotate(4deg);
}

.fancy:hover .letter:nth-child(9) {
  transform: translate(69%, 0%) rotate(-3deg);
}

.fancy:hover .letter:nth-child(10) {
  transform: translate(12%, 18%) rotate(5deg);
}

.fancy:hover .letter:nth-child(11) {
  transform: translate(15%, -10%) rotate(-5deg);
}

.fancy:hover .letter:nth-child(12) {
  transform: translate(0%, 60%) rotate(9deg);
}

<div id="txt">
  <div class="line">
    <p class="word">A</p>
    <p class="word">Person</p>
  </div>
  <div class="line">
    <p class="word">Youtube</p>
    <p class="word">&</p>
  </div>
  <div class="line">
    <a id="yt-link" href="www.youtube.com" class="word fancy" target="_blank"><span class="letter">C</span><span class="letter">o</span><span class="letter">d</span><span class="letter">e</span><span class="letter">p</span><span class="letter">e</span><span class="letter">n</span><span class="letter">d</span><span class="letter">e</span><span class="letter">n</span><span class="letter">c</span><span class="letter">e</span></a
        >
      </div>
      <div class="line">
        <a
          id="yt-link"
          href="www.youtube.com"
          class="word fancy"
          target="_blank"
          ><span class="letter">@</span><span class="letter">h</span><span class="letter">y</span><span class="letter">p</span><span class="letter">e</span><span class="letter">r</span><span class="letter">p</span><span class="letter">l</span><span class="letter">e</span><span class="letter">x</span><span class="letter">e</span><span class="letter">d</span></a>
  </div>
</div>

在这里，我想在变换转换后添加一个动画，为每个字母提供浮动效果，并且我希望在这些单词处于指定变换时发生浮动 转变后

我尝试添加动画，但每个字母都回到原来的位置

抱歉，我是前端初学者

Answer 1

我希望我正确理解你的问题。首先，要在悬停时执行复杂的动画等，您可以尝试使用

@keyframes

而不是

transition

。

以你的动画为例：

.fancy:hover .letter:nth-child(1) {
   transform: translate(-40%, 60%) rotate(8deg);
}

使用

@keyframes

它看起来像这样：

.fancy:hover .letter:nth-child(1) {
   animation: move 2s forwards;
   /* adding "forwards" can let it stop at the end of the animation. */
}

@keyframes move {
   0% {
      transform: translate(0, 0) rotate(0deg);
   }
   50%{
      transform: translate(100%, 100%) rotate(8deg);
   }
   100%{
      /* other animations you wanted to add */
   }

但是，如果您希望在鼠标移开后保持状态，则可能需要 JavaScript 在鼠标触摸后向元素添加一个类。

document.addEventListener("DOMContentLoaded", function () {
    var myElement = document.getElementById("myElement");
    myElement.addEventListener("mouseover", function () {
        myElement.classList.add("hovered");
    });
});

希望我的回答对您有帮助，祝您有美好的一天。