How to make a smooth image appearance when opening a site for the first time in css?

Question

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

html css вёрстка анимация

Author: Тимофей Карлин, 2020-05-03

Source

1 answers

score 1 · Answer 1

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>