How to make a smooth image appearance when opening a site for the first time in css?
There is a picture on the site header and I want this picture to appear smoothly on the screen when the user opens the site instead of the rough normal loading. How can this be implemented without using js only on html + css? I would appreciate your help.
0
Author: Тимофей Карлин, 2020-05-03
1 answers
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>
1
Author: Fr3z0n, 2020-05-03 05:41:58