Компонування Декількох Анімацій
Можна використовувати скорочену форму для вказання всіх властивостей анімації. Синтаксис наступний:
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;
Цей запис виглядає досить заплутано, і легко пропустити якусь властивість. Проте така можливість існує.
Примітка
Для браузера немає різниці між скороченим і повним способом вказання анімації.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Чудово!
Completion показник покращився до 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;
Цей запис виглядає досить заплутано, і легко пропустити якусь властивість. Проте така можливість існує.
Примітка
Для браузера немає різниці між скороченим і повним способом вказання анімації.
Дякуємо за ваш відгук!
