Анимация

Анимация

Coursme
8 мин.
17 янв. 2024

Анимации в CSS предоставляют более высокий уровень контроля над динамикой ваших веб-страниц. В отличие от переходов, которые позволяют задать плавные изменения от одного состояния к другому, анимации в CSS позволяют создавать более сложные и длительные движения. Мы будем использовать ключевые кадры (CSS Keyframes) для определения стадий анимации.

Основы CSS Анимаций

@keyframes

  • Определяет ключевые кадры, или стадии, анимации. Мы определяем начальный и конечный кадры, а CSS браузера заботится о промежуточных стадиях.
  • Пример:
@keyframes moveRight {
 from {
   left: 0;
 }
 to {
   left: 100px;
 }
}

animation-name

  • Указывает, какую анимацию использовать из ключевых кадров.
  • Пример: animation-name: moveRight; - использует ранее определенные ключевые кадры moveRight.

animation-duration

  • Устанавливает длительность анимации.
  • Пример: animation-duration: 2s; - анимация будет длиться 2 секунды.

Пример с Простой Анимацией:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
   .animate-box {
     width: 50px;
     height: 50px;
     background-color: coral;
     position: relative;
     animation-name: moveRight;
     animation-duration: 2s;
   }
   @keyframes moveRight {
     from {
       left: 0;
     }
     to {
       left: 100px;
     }
   }
 </style>
 <title>CSS Animation Lesson</title>
</head>
<body>
 <div class="animate-box"></div>
</body>
</html>
CSS Animation Lesson

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

Более сложные Анимации

animation-timing-function:

  • Определяет, как изменяется скорость анимации со временем. Работает так же, как и в переходах.
  • Пример: animation-timing-function: ease-in-out; - добавляет эффект плавного входа и выхода.

animation-delay:

  • Задержка перед началом анимации.
  • Пример: animation-delay: 1s; - анимация начнется через 1 секунду после загрузки страницы.animation-iteration-count:
  • Определяет, сколько раз анимация будет повторяться.
  • Пример: animation-iteration-count: infinite; - анимация будет воспроизводиться бесконечно.

animation-direction:

  • Управляет направлением анимации, вперед или назад.
  • Пример: animation-direction: alternate; - анимация будет проигрываться вперед и назад.

Пример с Использованием Дополнительных Свойств:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
   .pulse {
     width: 50px;
     height: 50px;
     background-color: purple;
     position: relative;
     animation: pulseAnimation 2s ease-in-out infinite alternate;
   }
   @keyframes pulseAnimation {
     from {
       transform: scale(1);
     }
     to {
       transform: scale(1.5);
     }
   }
 </style>
 <title>CSS Animation Lesson</title>
</head>
<body>
 <div class="pulse"></div>
</body>
</html>
CSS Animation Lesson

В этом примере мы создаем анимацию мигания (пульсации) квадрата, используя свойства анимации. Обратите внимание на использование animation для сокращенной записи всех свойств анимации.

Продвинутые Возможности CSS Анимаций

animation-fill-mode:

  • Определяет стили для элемента до начала анимации и после ее завершения.
  • Пример: animation-fill-mode: both; - применяет стили как до, так и после анимации.

animation-play-state:

  • Позволяет приостанавливать и возобновлять анимацию.
  • Пример: animation-play-state: paused; - анимация будет приостановлена.

animation-keyframes:

  • Позволяет создавать множество ключевых кадров, которые могут быть использованы с различными анимациями.
  • Пример:
@keyframes moveUpDown {
 0% {
   top: 0;
 }
 50% {
   top: 100px;
 }
 100% {
   top: 0;
 }
}
Пример с Продвинутыми Свойствами:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
   .swing {
     width: 50px;
     height: 100px;
     background-color: gold;
     position: relative;
     animation: swingAnimation 2s ease-in-out infinite;
   }
   @keyframes swingAnimation {
     0%, 100% {
       transform-origin: top center;
       transform: rotate(0deg);
     }
     50% {
       transform-origin: top center;
       transform: rotate(30deg);
     }
   }
 </style>
 <title>CSS Animation Lesson</title>
</head>
<body>
 <div class="swing"></div>
</body>
</html>
CSS Animation Lesson

В этом примере мы создаем анимацию "качающегося" элемента, используя transform-origin и вращение через ключевые кадры.

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

Заключение

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

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню