Animation shorthand property 😘

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

#css #html #beginners

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.