Приклади переходу CSS - Як використовувати анімацію при наведенні, змінити непрозорість тощо

Якщо ви працюєте з веб-технологіями, такими як CSS, HTML та JavaScript, важливо мати деякі базові знання про анімацію та переходи CSS.

У цій статті ми дізнаємось, як зробити деякі основні анімаційні переходи за допомогою CSS.

Як анімувати елемент з основним переходом при наведенні

У цьому прикладі ми змінимо непрозорість елемента, коли користувач наводить курсор миші на елемент.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

Це простий перехід, який можна викликати, коли ми наводимо курсор на елемент. Ми можемо додати більше одного переходу, який буде виконуватися одночасно.

Давайте додамо властивість масштабування перетворення, щоб додати елемент переходу масштабу.

 .elem:hover { transform: scale(1.1); }

Але перехід, здається, не є плавним, оскільки ми не визначили тривалість переходу і не використали жодної функції синхронізації.  

Якщо ми додамо transitionвластивість, це змусить елемент рухатися плавніше.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Давайте розберемо, як працює властивість переходу:

 transition: 500ms linear;
  • 500ms: тривалість переходу в мілісекундах
  • linear: функція синхронізації
div { transition:    ; }

Ми можемо додати більше варіантів, як показано нижче (приклади з MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

То що робить цей код?

  • властивість переходу: властивість, яку ви хочете анімувати. Це може бути будь-який CSS елемент , як background, height, translateY, translateXі так далі.
  • перехід-тривалість: тривалість переходу
  • затримка переходу: затримка перед початком переходу

Ви можете дізнатись більше про різні способи використання transitionCSS тут.

Як зробити переходи більш інтерактивними, використовуючи властивість анімації та ключові кадри

Ми можемо зробити більше з переходами CSS, щоб зробити цю анімацію більш креативною та інтерактивною.

Як перемістити елемент за допомогою ключових кадрів

Давайте розглянемо приклад, коли елемент рухається з точки А в точку В. Ми будемо використовувати translateX і translateY.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

І ось що ми отримуємо:

Цього разу ми використали нові властивості, такі як анімація та ключові кадри. Ми використовували animationвластивість для визначення імені та тривалості анімації, а ключові кадри дозволяють описати, як повинен рухатися елемент.

 animation: moveToRight 2s ease-in-out;

Тут я назвав анімацію moveToRight- але ви можете використовувати будь-яке ім’я, яке вам подобається. Тривалість є 2sі ease-in-outє функцією хронометражу.

Є й інші тимчасові функції , які можна використовувати , як ease-in, linear, ease-outякі в основному роблять анімацію більш гладкою. Ви можете дізнатись більше про функції синхронізації тут.

@keyframesприймає назву анімації. У цьому випадку це так moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesбуде виконувати анімацію у кілька кроків. У наведеному вище прикладі використовується відсоток для представлення діапазону або порядку переходів. Ми також могли б використовувати методи fromі to. як нижче "

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from представляє початкову точку або перший крок анімації.

to - кінцева точка або останній крок анімації, що виконується.

Можливо, ви захочете використовувати відсоток у деяких випадках. Наприклад, скажімо, що ви хочете додати більше двох переходів, які будуть виконуватися в послідовності, наприклад, наступні:

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Ми можемо бути більш креативними та анімувати багато властивостей одночасно, як у наступному прикладі:

Ви можете пограти з властивостями та техніками анімації в пісочниці тут:

Ми маємо набагато більше речей, які ми можемо зробити за допомогою ключових кадрів. Спочатку додамо більше переходів до нашої анімації.

Як анімувати більше властивостей та включити їх до переходу

Цього разу ми будемо анімувати фон, і ми змусимо елемент рухатися в квадратному візерунку. Ми змусимо анімацію працювати вічно, використовуючи infiniteвластивість як функцію синхронізації.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Давайте розберемо це. Спочатку додаємо, infiniteщоб анімація працювала вічно.

animation: moveToLeft 5s linear infinite;

А потім ми розділили анімацію на чотири кроки. На кожному кроці ми запускатимемо інший перехід, і вся анімація буде виконуватися в послідовності.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

Вивчивши основи анімації CSS, ви можете захотіти вийти за рамки та зробити більш складні речі, які вимагають взаємодії користувача. Для цього ви можете використовувати JavaScript або будь-які сторонні бібліотеки анімації.

Привіт, мене звуть Саїд Хаяні. Я створив subscri.io, щоб допомогти творцям, блогерам та інфлюенсерам збільшити свою аудиторію за допомогою інформаційного бюлетеня.