Как сделать плавное появление картинки при открытии сайта впервые на css?

Question

На шапке сайта имеется картинка и я хочу ,чтобы при открытии сайта у пользователя эта картинка плавно появлялась на экране вместо грубой обычной загрузки. Как это можно реализовать без использования js только на html + css? Буду признателен за помощь.

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>

БЛОГ НА HUSL

Как сделать плавное появление картинки при открытии сайта впервые на css?

Ответы (1 шт):