Визначення Тривалості Та Таймінгу Анімації
Свайпніть щоб показати меню
Розглянемо всі можливі способи роботи з часом анімації.
Властивість animation-duration
animation-duration задає час, необхідний для завершення одного циклу анімації (зміна від початкового до кінцевого стану), що вимірюється у секундах (s) або мілісекундах (ms).
animation-duration: 3s | 3000ms
Запустіть наступний приклад і наведіть курсор на коробку:
index.html
index.css
Властивість animation-timing-function
animation-timing-function визначає, як анімація змінюється з часом, контролюючи прискорення та уповільнення анімації. Властивість animation-timing-function може мати ті ж значення, що й властивість transition-timing-function. Доступно кілька попередньо визначених функцій часу, таких як linear, ease та ease-in-out, або можна задати власну кубічну криву Безьє за допомогою функції cubic-bezier().
animation-timing-function: time_function
Застосуємо різні time_functions до коробок у прикладі:
index.html
index.css
Властивість animation-delay
animation-delay визначає час, який має пройти перед початком анімації. Може задаватися у секундах (s) або мілісекундах (ms).
animation-delay: 0.1s | 100ms
Застосуємо різні затримки до блоків у прикладі:
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
