02 Июн 2023
2 мин
102

Как сделать анимацию на сайте с помощью CSS3

Узнайте, как сделать анимацию на сайте с помощью CSS3, основы создания ключевых кадров и примеры применения анимации.

Computer screen with an animated color-changing button.

Содержание

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

CSS3 анимация: ключевые кадры и свойство animation

CSS3 анимация основана на двух основных компонентах: ключевых кадрах и свойстве animation. Ключевые кадры определяют стили для различных этапов анимации, а свойство animation применяет эти ключевые кадры к элементу на странице.

Создание ключевых кадров

Чтобы создать ключевые кадры, используйте директиву @keyframes с именем анимации. Затем определите стили для различных процентов времени анимации:

@keyframes example-animation {
  0% {
    background-color: red;
    left: 0;
  }
  50% {
    background-color: yellow;
    left: 100px;
  }
  100% {
    background-color: blue;
    left: 0;
  }
}

В этом примере мы создали ключевые кадры с именем example-animation. Анимация начинается с красного фона и элемента слева, затем перемещается на 100 пикселей вправо с желтым фоном в середине анимации и возвращается в начальное положение с синим фоном в конце анимации.

Применение анимации к элементу

Чтобы применить анимацию к элементу на странице, используйте свойство animation:

.example-element {
  animation: example-animation 2s infinite;
}

Здесь мы применяем анимацию example-animation к элементу с классом .example-element. Длительность анимации составляет 2 секунды, а ключевое слово infinite указывает на то, что анимация будет повторяться бесконечно.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Получить программу

Пример анимации с использованием CSS3

Рассмотрим пример анимации с использованием CSS3 на практике. Мы создадим анимацию изменения фона для кнопки при наведении курсора:

HTML:

<button class="example-button">Нажми меня</button>

CSS:

.example-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.5s;
}

.example-button:hover {
  background-color: red;
  animation: change-color 1s infinite;
}

@keyframes change-color {
  0%, 100% {
    background-color: red;
  }
  50% {
    background-color: purple;
  }
}

В этом примере мы создали кнопку с классом .example-button. При наведении курсора на кнопку, фон кнопки меняется с синего на красный, а затем анимация изменения цвета фона начинается с красного и меняется на фиолетовый в середине анимации. Анимация повторяется бесконечно.

Теперь вы знаете основы создания анимации с помощью CSS3 и можете применить эти знания для улучшения ваших веб-проектов. Удачи в обучении и практике! 😉

Добавить комментарий