Hey lover people, Happy valentines day ๐๐
Hope you are enjoyed your day with your partner.
This post is a part of our "20 Days of CSS animation post".
20 Days of CSS animation post๐ช
๐ฉ Atul Prajapati ๐ฎ๐ณ ใป Jan 30 '21 ใป 1 min read
In this dev post we will learn animation shorthand property, So let do it.
First of all play with this codepen.
This is long animation properties
- animation-name: grow;
- animation-duration: 1s;
- animation-timing-function: ease;
- animation-delay: 1s;
- animation-iteration-count: 4;
- animation-direction: alternate;
- animation-fill-mode: backwards;
And this is the shorthand of our animation properties.
- animation: grow 1s ease 1s 4 alternate;
But keep in mind we can't write fill mode in shorthand property. we have to write it in a separate line. like this
- animation-fill-mode: backwards;
That's all for this post And if you are interested to learn CSS you can join E-Learning platform.
Top comments (0)