Composing Multiple Animations
We can use the shorthand form to specify all animation properties. The syntax is following:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Let's rewrite the next properties briefly.
Long way
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;
shorthand
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
It looks so confusing, and we can miss some value easily. However, we have such an opportunity.
Note
For the browser, there is no difference between the shorthand and the long way of specifying the animation.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.04
Composing Multiple Animations
Свайпніть щоб показати меню
We can use the shorthand form to specify all animation properties. The syntax is following:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Let's rewrite the next properties briefly.
Long way
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;
shorthand
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
It looks so confusing, and we can miss some value easily. However, we have such an opportunity.
Note
For the browser, there is no difference between the shorthand and the long way of specifying the animation.
Дякуємо за ваш відгук!