Learning Transition and animation properties in CSS

When you search the internet to answer your question, you prefer a website over other sites and spend a lot of time on it to meet your needs.

What is it about these sites that motivate you to use them?

Before you realize  the quality of the site content, it is the site's appearance that attracts you. You decide whether to choose it to continue your work or not based on the appearance of the site beautify the appearance of it, you can use different programming languages, one of which is CSS, and various  programmers and designers  are very interested in using this language to do this task, here are some features that you can add to various content, including transition and animation, but before that, we need to take a look at the CSS definition.

What is CSS?

It stands for  Cascading Style Sheets, in fact, it describes how HTML elements are displayed on various sites, simply put, if you consider HTML as the skeletons of a human body, CSS can be considered as the skin which ultimately makes up a human appearance, and it can be used to control the layout of multiple web pages at the same time.

Therefore, if you couldn't take advantage of it, the web world would be so boring, and users would be tired of navigating, so they wouldn't prefer to spend long hours in it to get the answers they need.

CSS Transitions:

It is one of the properties that you can apply to  HTML elements, and by specifying different features in it, you can make the desired element more visible or do other things with its help, in other words, with the help of it, you can change property values ​​which you can specify a period to do this, different browsers can support this feature in different sizes, for example, Google Chrome supports different features created by CSS Transitions more than other browsers, to use this, you need to consider two things, one of which is the element you want to apply this property to, and also specifying how long you want the transition effect to run during that time.

Consider the following example.

You may also place a blue square in the content between the two p elements and want it to become a larger square when the mouse hovers over it, meaning that both the length and the width of the square must be changed, now consider the following example.

Transition-timing-function:

By using it, the speed of transition property will be set,  the transition-timing-function  property can have the following values:

- Linear:

The transition property is done at the same speed if this item is selected.

- Ease:

This property is set by default, and this effect is shown so that it starts and ends with low speed, but it has more speed between the beginning and the end.

- Ease-in:

You can use these values ​​to start the effect at a slow speed.

- Ease-out:

It is the opposite of the previous case, and it finishes the effect at a slow speed.

- Ease-in-out:

This feature is also used when you want the effect you want to start on an element at a slow speed and end at a slow speed.

- Cubic-bezier (n, n, n, n):

In this case, you can specify the speed of the parameter by yourself, now consider the following example:

Transition-delay:

You may not want the user to see the effect as soon as they hover their mouse over it, and you may want to take a time interval between when the mouse hovers over the element which has the effect and its start to do this, you must do the following.

CSS Animations:

By using this property, it is possible to  design attractive and motivating page elements for web  users, which can have a significant impact on the attractiveness of content; in fact, animation allows an element to change its style.

To implement this property, you first need to specify the number of keyframes and be familiar with @keyframes. This determines the styles that element would have at certain times here; consider the following example.

Animation-duration:

Determining this property is very important because if no value is specified for it, the animation will not run because the preset value is zero, so you need to specify it. In the previous example, this item was set for 5 seconds; in simple terms, in the previous example, the animation runs in 5 seconds.

Animation-delay:

As the name implies, when you want to start an animation with a slight delay, you should use this item and specify the time you want it to be. Note the example below where the specified time is 3 seconds.

Animation-iteration-count:

To set an animation to be played multiple times, you need to go to animation-iteration-count and use it by specifying the number of times you want the animation to be played. For instance, suppose you want to put the previous example in a state where the animation will be repeated four times. To do this, you must enter the following command.

Animation-direction:

Specifies whether to run the animation reverse or not; the default is "normal." The animation-direction property can have the following values:

- Normal:

As we said, this value would be set by default if this item is not specified.

- Reverse:

In this case, the animation is played backward.

- Alternate:

In this case, first, the animation is run forwards and then backward.

- Alternate-reverse:

This is the opposite of the previous case, in which the animation is run first backward and then forwards.

In addition to the properties we have mentioned so far, they can be  added to an animation and make it even more attractive. Other ones can be changed by adding any kind of animation.

Last word:

In general, several things in CSS can be mastered to make the appearance of content attractive. In this article, we have examined two of the most important things that can be used and also mentioned how the properties can be added and used according to the purpose we have.