On the header of the site, there is a picture and I want to at the user at the opening of the user, this picture smoothly appeared on the screen instead of a rough ordinary load.
How can this be implemented without using JS only on HTML + CSS?
I will be grateful for the 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;}
}
& lt; div class = "header" & gt;
& lt; img src = "https://cache.kwork.ru/files/portfolio/t1_r/16/cover-255168-1544029616.jpg" Alt = "" & gt;
& lt; / div & gt;