Допустим, Вы хотя бы иногда работаете с видеоредакторами: Windows Movie Maker или Adobe Premiere Pro. В таком случае Вам хорошо известны эффекты постепенного исчезновения (fade out) или появления изображения (fade in). Можно с уверенность сказать, что эти эффекты популярны, потому что они позволяют создавать довольно приятные переходы, которые не раздражают пользователей.

Давайте поработаем над постепенным появлением и исчезновением блоков в HTML-документах.

Полагаю в этом месте Вы скажете: “Постойте. Все уже давно сделано. Одноименные функции: .fadeIn() и .fadeOut() давно существуют в библиотеке jQuery”

Но дайте закончить мысль: мы создадим эффекты постепенного появления и исчезновения блоков с помощью CSS.

Итак, приступим.

Эффект появления блока (fadeIn)

Добавим в CSS-файл код, который позволит изменять состояние блока от прозрачного до полностью непрозрачного:

.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

Для класса .fade-in указано достаточно большое время выполнение - 10 секунд. Это значение носит демонстрационный харктер и должно быть скорректировано, в соответствии с поставленными Вами целями.

Как Вы заметили, в примере используются префиксы вендоров (-webkit, -moz, -o, -ms), которые позволяют нам быть уверенными, что данный эффект будет актуален и для старых версий браузеров различных производителей. По данным статистики, использование префиксов очень раздражает разработчиков. Но, в конце-концов, удобство пользователей для нас в приоритете.

Теперь скорректируем HTML-документ и присвоим класс .fade-in блоку, который выполнит функцию обертки - эффект появления будет работать для всех тегов, размещенных внутри этого блока:

<div class="fade-in">
    <img src="../images/epic-cat-picture.png">
</div>

Эффект исчезновения блока (fadeOut)

Чтобы сделать элемент прозрачным, добавим в CSS-файл следующий код:

.fade-out {
  animation: fadeOut ease 8s;
  -webkit-animation: fadeOut ease 8s;
  -moz-animation: fadeOut ease 8s;
  -o-animation: fadeOut ease 8s;
  -ms-animation: fadeOut ease 8s;
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-moz-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-o-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-ms-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

В данном случае непрозрачность блока меняется от 1 (100%) до 0 (0%), то есть элемент становится абсолютно прозрачным.

Изменения в HTML-документе соответствуют алгоритму, предложенному в первом примере:

<div class="fade-out">
    <img src="../images/little-bird-picture.png">
</div>

Мы еще раз убедились, что можно создавать анимацию HTML-элементов только с помощью CSS без привлечения сторонних библиотек.

Спасибо за внимание.