There is a picture on the header of the site, and I want this picture to appear smoothly on the screen when the user opens the site, instead of rough normal loading.
How can this be implemented without using js only in html + css?
I would be grateful for your help.
Answer 1, authority 100%
body {
height: 100%;
}
.header {
height: 200px;
background: #bfbfbf;
}
img {
width: 100px;
position: relative;
top: 50%;
left: 100px;
transform: translateY(-50%);
animation-name: Appearance;
animation-duration: 3s;
animation-timing-function: cubic-bezier(.1,-.6,.2,0);
}
@-webkit-keyframes Appearance {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes Appearance {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes Appearance {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes Appearance {
0% {opacity: 0;}
100% {opacity: 1;}
}<div class="header">
<img src="https://cache.kwork.ru/files/portfolio/t1_r/16/cover-255168-1544029616.jpg" alt="">
</div>