为啥我的图像动画代码不起作用？

Posted 2023-03-06

【中文标题】为啥我的图像动画代码不起作用？

【英文标题】：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>

【参考方案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>