Как добавить анимацию появления блоков?

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

1. Использование CSS3 анимаций:
С помощью свойств @keyframes, animation и animation-delay вы можете создать анимацию появления блока. Вот пример:

HTML:

   <div class="animated-block"></div>

CSS:

   .animated-block {
     width: 200px;
     height: 200px;
     background-color: red;
     animation-name: fadeIn;
     animation-duration: 2s;
     animation-delay: 1s;
     animation-fill-mode: both;
   }

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

В этом примере блок animated-block появляется с задержкой в 1 секунду и продолжительностью анимации в 2 секунды с помощью ключевого кадра fadeIn.

2. Использование CSS transitions:
Этот метод позволяет анимировать изменение стилей элемента при переходе от одного состояния к другому. Вот пример:

HTML:

   <div class="animated-block"></div>

CSS:

   .animated-block {
     width: 200px;
     height: 200px;
     background-color: red;
     opacity: 0;
     transition: opacity 2s ease-in-out;
   }

   .animated-block.show {
     opacity: 1;
   }

JavaScript:

   // При необходимости, придайте классу .animated-block класс "show" с помощью JavaScript.
   var block = document.querySelector('.animated-block');
   block.classList.add('show');

В этом примере блок animated-block имеет нулевую непрозрачность (opacity: 0) и анимируется до полной непрозрачности (opacity: 1) в течение 2 секунд с помощью свойства transition. Для запуска анимации добавляется класс "show" с помощью JavaScript.

Оба этих метода позволяют добавлять различные анимации к блокам, определять их продолжительность, задержку и другие свойства. Вы можете настроить эффект анимации, добавив другие свойства и ключевые кадры в CSS.