为什么我的 Image animation 代码不起作用？

Question

I'm working on an animation with css and html but my animation isn't working.

https://www.abroprojectafbouw.nl/

Here is an example how it should look if its done (you need to scroll down) and here is my code. The black screen is always jumping back. Thank you for Help!

 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>

Answer 1

Add overflow: hidden to .img and forwards to slide animation.

 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>