Как создать плавную анимацию с помощью CSS

Чтобы создать плавную анимацию с помощью CSS и HTML, начните с создания элемента HTML. Это может быть что угодно, от <div> до <p> — все, что имеет смысл для вашего проекта. Для этого примера воспользуемся тегом <div>:

<div></div>

2. Добавьте стили CSS к элементу

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

div { 
  background-color: #000;
  color: #fff;
  text-align: center;
}

3. Установите начальную непрозрачность для элемента

Чтобы создать эффект анимации, нам нужно установить начальную непрозрачность для элемента, равную 0. Это сделает элемент фактически невидимым при первой загрузке на странице:

div { 
 background-color: #000;
 color: #fff;
 text-align: center;

 /* Set opacity to 0 */  
 opacity: 0;  
}

4. Создайте ключевые кадры анимации

Теперь, когда у нас есть отправная точка, мы можем создать ключевые кадры анимации, которые составят наш эффект плавного появления. Для этого воспользуемся правилом @keyframes в CSS. Правило from указывает начальную точку нашей анимации, а правило to определяет конечную точку:

@keyframes fadeIn {  
   from {  
       opacity:0;  
   }  

   to {  
       opacity:1;  
   }  
}

5. Добавьте свойства анимации к элементу

Следующим шагом является добавление необходимых свойств анимации к нашему элементу HTML. Эти свойства сообщат нашему элементу, когда и как долго анимировать. Здесь мы воспользуемся свойством animation и укажем, что наша анимация должна длиться 2 секунды и иметь функцию синхронизации:

div { 
 background-color: #000;  																  /* Set initial properties */
 background-color: #000;
 color: #fff;
 text-align: center;
 opacity: 0;
    
 /* Add animation properties */
 animation: fadeIn 2s ease-in; 
}

6. Наслаждайтесь анимацией Fade In!

Вот и все! После того, как вы сохранили свои изменения, у вас должна появиться красивая анимация постепенного появления, когда ваш HTML-элемент загружается на страницу. Наслаждаться!

Спасибо за чтение. Если вам понравился этот блог, рассмотрите возможность подписаться на мою учетную запись Medium для ежедневных блогов на темы разработки программного обеспечения и технологий!