Looking to achieve a fading in animation effect on an image using opacity. The goal is for the image to appear as if it is fading in from left to right, not sliding.
While I have a solid approach in mind, currently the image remains visible at all times. However, the animation of the white div is working smoothly thus far.
<div class="font-grotesk h-[500px] bg-gray-900">
<div class="flex h-[100px]">
<div class="second-logo max-w-[150px] bg-white">
<img src="https://placehold.co/90x30" class="min-w-[150px] overflow-hidden px-[14px] py-9" />
</div>
</div>
</div>
Here is my CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
.second-logo {
animation: showHide 3s;
}
@keyframes showHide {
0% {
width: 0;
}
100% {
width: 100%;
}
}
View the playground here.