javascript - 动画后无法移动网页中的文字

Question

在尝试制作页面时，我添加了animation-fill-mode: forwards。动画完成后，我无法在我制作动画的方向上移动该特定文本(我制作动画)。例如，如果我使用 top 设置动画，那么当我手动尝试移动文本(向上或向下)时，我无法做到。 Right 和 left 有效，但 top 无效。

* @media screen and (max-width: 768px) {}

@keyframes heading {
  from {
    top: 350px;
  }
  to {
    top: 300px;
  }
}

@keyframes quote {
  from {
    top: 290px
  }
  to {
    top: 240px
  }
}

@keyframes button {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes mvbut {
  from {
    top: 266px;
    right: 185px
  }
  to {
    top: 250px;
    right: 170px;
  }
}

.button {
  background-color: white;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 266px;
  right: 185px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.button1:hover {
  background-color: black;
  color: white;
}

.button3:click {
  animation-name: mvbut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.button2 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 210px;
  left: 0px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2.3s;
  animation-fill-mode: forwards;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 154px;
  left: 185px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  height: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
}

.button3:hover {
  background-color: black;
  color: white;
}

@font-face {
  font-family: beatsurge;
  src: url(neutronium.ttf);
}

p.border {
  border-style: solid;
  border-width: 2px;
  padding: 20px;
  position: absolute;
  border-radius: 50px 20px;
  position: absolute;
}

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  color: white;
  font-family: beatsurge;
  font-size: 100px;
  text-align: center;
  top: 350px;
  left: 0px;
  position: relative;
  animation-name: heading;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

p {
  font-size: 20px;
  text-align: center;
  color: white;
  position: relative;
  top: 290px;
  left: 0px;
  animation-name: quote;
  animation-duration: 1s;
  animation-delay: 1.25s;
  animation-fill-mode: forwards;
}

<div>
  <h1><strong>BEAT SURGE</strong></h1>
</div>
<p>
  Where words fail, music speaks.
</p>
<button class="button button1">Remixes</button>
<button class="button button2">Original Content</button>
<button class="button button3">About Us</button>

Answer 1

animation-fill-mode: forwards; 告诉它在动画完成时使用动画的最终值作为 CSS。这是预期的行为。

你可能想做 animation-fill-mode: backwards 告诉它在完成后使用 CSS，将初始 CSS 设置为最终值，然后设置你的 0% 实际初始 CSS 的关键帧。

* @media screen and (max-width: 768px) {}

@keyframes heading {
  0% {
    top: 350px;
  }
  100% {
    top: 300px;
  }
}

@keyframes quote {
  from {
    top: 290px
  }
  to {
    top: 240px
  }
}

@keyframes button {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes mvbut {
  from {
    top: 266px;
    right: 185px
  }
  to {
    top: 250px;
    right: 170px;
  }
}

.button {
  background-color: white;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 266px;
  right: 185px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.button1:hover {
  background-color: black;
  color: white;
}

.button3:click {
  animation-name: mvbut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.button2 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 210px;
  left: 0px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2.3s;
  animation-fill-mode: forwards;
}

.button2:hover {
  background-color: black;
  color: white;
}

.button3 {
  background-color: white;
  color: black;
  border: 1px solid white;
  position: relative;
  top: 154px;
  left: 185px;
  border-radius: 30px 7px;
  display: block;
  margin: auto;
  height: auto;
  opacity: 0;
  animation-name: button;
  animation-duration: 0.5s;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
}

.button3:hover {
  background-color: black;
  color: white;
}

@font-face {
  font-family: beatsurge;
  src: url(neutronium.ttf);
}

p.border {
  border-style: solid;
  border-width: 2px;
  padding: 20px;
  position: absolute;
  border-radius: 50px 20px;
  position: absolute;
}

body {
  background-image: url("background.jpg");
  background-color: blue;
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  color: white;
  font-family: beatsurge;
  font-size: 100px;
  text-align: center;
  top: 300px;
  left: 0px;
  position: relative;
  animation-name: heading;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

p {
  font-size: 20px;
  text-align: center;
  color: white;
  position: relative;
  top: 290px;
  left: 0px;
  animation-name: quote;
  animation-duration: 1s;
  animation-delay: 1.25s;
  animation-fill-mode: forwards;
}

<div>
  <h1><strong>BEAT SURGE</strong></h1>
</div>
<p>
  Where words fail, music speaks.
</p>
<button class="button button1" onClick="document.querySelector('h1').style.top = '280px';">Remixes</button>
<button class="button button2">Original Content</button>
<button class="button button3">About Us</button>