I've been trying to create an animation using CSS and HTML, but for some reason, my animation just isn't working properly.
Take a look at this example of what I'm hoping to achieve (you'll need to scroll down) and compare it with the code I've used. Unfortunately, the black screen keeps glitching back. Any suggestions or help would be greatly appreciated!
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>