DEV Community

Cover image for Defining Animation property ๐Ÿฆพ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on โ€ข Edited on

1

Defining Animation property ๐Ÿฆพ

Hello busy folks ๐Ÿ‘‹,

Hope you are guy's doing well in your career.

This post is a part of our "21 Days of CSS animation post"

In this post, I'm going to try to explain about CSS "animation property".

This is how we can define our CSS animation property.

keyframes

After @keyframes keyword "grow" is our animation-name value.

This is how we can assign our animation effect to specific element or component here we are assigning animation to our box element.

Animation Name

By this property, we are setting time duration like in how much time period our animation will take to finish.

Duration

Code playground for our animation project

That's all for this post And if you are interested to learn CSS you can join Eduonix E-Learning platform.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series ๐Ÿ“บ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay