I've been attempting to create a similar animation using html and css.
Below gif shows the desired outcome I am aiming for:
https://i.sstatic.net/YsNGy.gif
Although I have tried the following code, I have not been able to achieve the desired result. Can anyone provide guidance on how to implement this animation effectively?
.container {
position: relative;
width: 800px;
/* Adjust this to match your image width */
height: 400px;
/* Adjust this to match your image height */
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 100%;
/* Start the overlay off-screen to the right */
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
animation: slide 5s linear forwards;
}
@keyframes slide {
0% {
left: 100%;
/* Start off-screen to the right */
}
100% {
left: -100%;
/* Slide to the left */
}
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/* Adjust as needed */
object-fit: cover;
/* Adjust as needed */
}<div class="container">
<div class="overlay"></div>
<img src="test.png" alt="Input 1">
</div>