动画在主体上结束后主体的行为

Question

我有个问题。我在身体上做了一个CSS动画，从一种颜色切换到另一种颜色大约10秒，只显示了一个图像和一个paragraph，忽略了paragraphs的其余部分和其他用我的HTML代码编写的东西。

当动画完成后，我希望body显示实际的HTML内容(其他paragraphs和DIV等)。现在这就是问题所在，我尝试了不透明度，在动画过程中将其设置为0，然后在动画结束后将其重置为1，但我无法做到这一点。你能帮我吗?我在JS中用事件侦听器和CSS中的关键帧创建了动画。

​

let backColor = document.querySelector('body');
let banner = document.querySelector('#banner p');
let img = document.querySelector('#banner img');

function myMove() {
  backColor.style.WebkitAnimation = 'mymove 7s 1s 1 forwards';
  backColor.style.animation = 'mymove 7s 1s 1 forwards';
}

backColor.addEventListener('animationstart', () => {
  this.style.backgroundColor = 'white';
});

backColor.addEventListener('animationend', () => {
  this.style.backgroundColor = 'black';
});

myMove();

function yourMove() {
  banner.style.WebkitAnimation = 'yourmove 6s 4s 1';
  banner.style.animation = 'yourmove 6s 4s 1';
}

banner.addEventListener('animationstart', () => {
  this.style.opacity = 0;
});

banner.addEventListener('animationend', () => {
  this.style.opacity = 1;
});

yourMove();

function hisMove() {
  img.style.WebkitAnimation = 'hismove 3s 6s 1';
  img.style.animation = 'hismove 3s 6s 1';
}

img.addEventListener('animationstart', () => {
  this.style.opacity = 0;
});

img.addEventListener('animationend', () => {
  this.style.opacity = 1;
});

hisMove();

body {
  margin: 0;
  padding: 0;
}

@keyframes mymove {
  from {
    background-color: white;
  }
  to {
    background-color: black;
  }
}

#banner p {
  color: white;
  font-size: 25px;
  font-family: Georgia;
  opacity: 0;
  text-align: center;
}

img {
  position: relative;
  left: 35%;
  opacity: 0;
}

@keyframes yourmove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hismove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="banner">
    <p>In the loving memory of <br />Kobe Bryant (1978 - 2020)</p>
    <img src="https://i.ytimg.com/vi/tiE7aa9HTec/maxresdefault.jpg" width="450" height="300">
  </div>
  <div id="container">
    <!-- rest of the html content -->
  </div>
  <script type="text/javascript" src="kobe.js"></script>
</body>

</html>

​

Answer 1

不会是这样的，但它是固定的：

​

let backColor = document.querySelector('body');
let banner = document.querySelector('#banner p');
let img = document.querySelector('#banner img');

function myMove() {
  backColor.style.WebkitAnimation = 'mymove 7s 1s 1 forwards';
  backColor.style.animation = 'mymove 7s 1s 1 forwards';
}

backColor.addEventListener('animationstart', () => {
  backColor.style.backgroundColor = 'white';
});

backColor.addEventListener('animationend', () => {
  backColor.style.backgroundColor = 'black';
});

myMove();

function yourMove() {
  banner.style.WebkitAnimation = 'yourmove 6s 4s 1';
  banner.style.animation = 'yourmove 6s 4s 1';
}

banner.addEventListener('animationstart', () => {
  banner.style.opacity = 0;
});

banner.addEventListener('animationend', () => {
  banner.style.opacity = 1;
});

yourMove();

function hisMove() {
  img.style.WebkitAnimation = 'hismove 3s 6s 1';
  img.style.animation = 'hismove 3s 6s 1';
}

img.addEventListener('animationstart', () => {
  img.style.opacity = 0;
});

img.addEventListener('animationend', () => {
  img.style.opacity = 1;
});

hisMove();

body {
  margin: 0;
  padding: 0;
  color: white;
}

@keyframes mymove {
  from {
    background-color: white;
  }
  to {
    background-color: black;
  }
}

#banner p {
  color: white;
  font-size: 25px;
  font-family: Georgia;
  opacity: 0;
  text-align: center;
}

img {
  position: relative;
  left: 35%;
  opacity: 0;
}

@keyframes yourmove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hismove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="banner">
    <p>In the loving memory of <br />Kobe Bryant (1978 - 2020)</p>
    <img src="https://i.ytimg.com/vi/tiE7aa9HTec/maxresdefault.jpg" width="450" height="300">
  </div>
  <div id="container">
    <!-- rest of the html content -->
    RIP RIP RIP RIP RIP RIP
  </div>
  <script type="text/javascript" src="kobe.js"></script>
</body>

</html>

​