Home html How to make a smooth appearance picture when opening a site for...

How to make a smooth appearance picture when opening a site for the first time on CSS?

Author

Date

Category

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; 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions