Learn quickly about CSS3 Animation

Hello friends!

With the popularity of CSS3 today, the use of Animation will not be strange anymore. However, to know the details of each value and apply them, few people will go to find out. Even myself when using animation, I do not use all the properties of the animation, but only use a certain part so my effect can run fine.

What is animation?

Animation is understood as motion effects, used to create moving effects for elements, allowing an element to gradually change from one type to another. You can optionally change the CSS properties according to your wishes.

Most importantly, for an animation to work, a keyframe is required. When declaring CSS in a keyframe , styles will gradually change from the current style to the new one at certain times.

Analyze a little bit about the css above.

• We have a div with the background-color default red.
• To change the background color from red to yellow, you need to use the keyframe to change the backgound-color for that div without any action. If it’s normal to change background-color, you need to use : hover or : focus, but for animation, it doesn’t.

Also in the above example code, we see two properties: animation-name and animation-duration.

Judging from this, these are the 2 most important attributes of the animation, without these two properties, the animation will run away.

• animation-name : The name of the animation. When declaring a keyframe , an animation-name is required so that the keyframes know which animation it is running for. Everything doesn’t need a name let alone an animation, right?
• animation-duration : is the amount of time the effect takes place. If the duration is not specified there will be no effect because the default value is 0. Of course, if animation-duration = 0 then the animation cannot run.

That’s why I said animation-name and animation-duration are two indispensable attributes if you want your animation to run. Can run, not to mention delicious or bad.

In addition, the 2 above attributes have a number of other attributes as well.

• animation-delay
• animation-timing-function
• animation-iteration-count
• aniamtion-direction
• animation-fill-mode

The animation-delay property

animation-delay is used to define the delay between the time an attribute changes and when the animation effect actually begins. That means it will wait a certain time before running the effect.

Example 1: Wait 2 seconds before starting the effect.

Usually I use this attribute sparingly. At most, 1s or 1.5s is the same. Waiting too long is dislike.

The animation-timing-function property

The animation-timing-function property is used to determine the rate at which the effect will change as the effect occurs.

Available values ​​are as follows:

• ease : it’s slow to start, then quicker and closer to the end more slowly (the default value).
• linear : from start to end speed is the same. The speed is even.
• ease-in : slow at the start then slowly go to the end.
• ease-out : fast to the start and slow down until the end.
• ease-in-out : slow at the beginning then quicken in the middle and slowly end at the end.
• cubic-bezier (n, n, n, n) : allows you to define a value of your own according to the bezier function

You can see the demo running here

The animation-iteration-count property

The animation-iteration-count property is used to set the number of times an animation should be executed. Values ​​are usually:

• X given times (X is a positive integer)
• infinite : continuous and infinite loop animation

The animation-direction property

The animation-direction property is used to specify the direction of the animation. The values ​​that animation-direction can take are:

• normal : the animation moves normally forward (default)
• reverse : the animation moves in the opposite direction, backwards.
• alternate : animation moves forward, then backward in the opposite direction
• alternate-reverse : the animation moves backwards, then forwards.

The animation-fill-mode property

The CSS animation does not affect the element before the first keyframe is run and after the last keyframe ends. And the animation-fill-mode property is used to change the element’s state before starting after the end of the animation.

Available values ​​are as follows:

• none : when the animation is not active, it will keep the element’s motionless state, without adding any style to the element (default).
• forwards : when the animation is idle after the animation ends, this value applies the properties of the last time appearing in the keyframe to the state of the element (depends on animation-direction and animation-iteration-count).
• backwards : when the animation is idle before the animation starts (in delay), this value applies the properties of the first occurrence in the keyfame to the state of the element (depending on the anmation- property. direction).
• both : combines both forwards and backwards for the element’s state.

About this property, I almost never use it at all.

Write collapsed Animation

For example, we use 6 properties of animation as follows:

Every time I write like this is quite a waste of time. So there is a way to combine the properties of the animation like margin, padding, … so. We will include the following:

That is, there will be syntax like this

I did a demo of button animation like this

In this example, I don’t use all the properties of the animation, I just use a few.

If I were to write the animation details above, I would look like this

That is, in this example I only need to use 4 attributes is enough.

So in this article I have introduced to you about animation. Hope it can be of some help to you.

Thank you for watching!

Reference sources: w3schools, quantrimang. com