Компонування Декількох Анімацій
Можна використовувати скорочену форму для вказання всіх властивостей анімації. Синтаксис наступний:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Перепишемо наступні властивості у скороченому вигляді.
Повний запис
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Скорочений запис
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Цей запис виглядає досить заплутано, і легко пропустити якусь властивість. Проте така можливість існує.
Примітка
Для браузера немає різниці між скороченим і повним способом вказання анімації.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.08Компонування Декількох Анімацій
Свайпніть щоб показати меню
Можна використовувати скорочену форму для вказання всіх властивостей анімації. Синтаксис наступний:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Перепишемо наступні властивості у скороченому вигляді.
Повний запис
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Скорочений запис
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Цей запис виглядає досить заплутано, і легко пропустити якусь властивість. Проте така можливість існує.
Примітка
Для браузера немає різниці між скороченим і повним способом вказання анімації.
Дякуємо за ваш відгук!
