xxxxxxxxxx
// Use keyframes to create an animation that fades in
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
img {
opacity: 0; /* Initially set the opacity to 0 */
animation: fade-in 1s; /* Add the animation to the image */
}
// BONUS
// You can also customize the animation by including multiple keyframes
@keyframes fade-in {
0% { opacity: 0; }
80% { opacity: 0.1; }
100% { opacity: 1; }
}
xxxxxxxxxx
<div class="fadeIn">
<img src="source">
</div>
//css
.fadeIn{ animation: fade 5s; }
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}