为什么我的图像动画代码不起作用？答案

【问题标题】：Why does my Image animation code not work?为什么我的图像动画代码不起作用？
【发布时间】：2020-12-07 01:50:08
【问题描述】：

我正在使用 css 和 html 制作动画，但我的动画无法正常工作。

https://www.abroprojectafbouw.nl/

这里是一个例子，如果它完成了（你需要向下滚动），这是我的代码。黑屏总是跳回来。感谢您的帮助！

html,
body {
  height: 100vh;
}

body {
  margin: 0;
  width: 100%;
}

.image {
  animation: change 0.5s ease-out;
  height: 70vw;
}

.img {
  background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
  background-size: cover;
  position: relative;
  width: 100%;
  height: 70vw;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 70vw;
  background-color: #000;
  top: 0;
  right: 0;
  animation: slide 0.5s ease-out;
  animation-delay: 0.6s;
}

@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes change {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

<div class="image">
  <div class="img">
    <div class="overlay"></div>
  </div>
</div>

【问题讨论】：

标签： html css image animation

【解决方案1】：

将overflow: hidden 添加到.img 和forwards 以添加幻灯片动画。

html,
body {
  height: 100vh;
}

body {
  margin: 0;
  width: 100%;
}

.image {
  animation: change 0.5s ease-out;
  height: 70vw;
}

.img {
  background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
  background-size: cover;
  position: relative;
  width: 100%;
  height: 70vw;
  overflow: hidden;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 70vw;
  background-color: #000;
  top: 0;
  right: 0;
  animation: slide 0.5s ease-out forwards;
  animation-delay: 0.6s;
}

@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes change {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

<div class="image">
  <div class="img">
    <div class="overlay"></div>
  </div>
</div>

【讨论】：