Transitions and animations

To give more dynamism to the elements of your web page, you can use transitions.

Transitions serve to achieve an effect gradually between the initial and final state of an element during a period of time.

The simplest example that we will explain is the changing of the color of a button when we put the mouse cursor over it (hover).

What do transitions do?

To apply a transition, the transition property is used, and this is an abbreviation of the following parameters:

• transition-property: Property to which the effect of the transition will be applied. We use ‘all’ if we want it to be applied over all properties or ‘’ none ‘for none. Any CSS property is valid: width, height, color, border, etc.
• transition-duration: Specifies the duration of the transition from the beginning to the end of the effect. It is recommended to use short values ​​in seconds or milliseconds (example: 2s, 150ms).
• transition-timing-function: Determines the speed curve of the transition, that is, if we want it to maintain a constant speed, or a fast or slow start, or end, etc. Specifically we can use the following:
• linear: Maintains the same speed from start to finish.
• ease: Slow start, then fast and ends slow.
• ease-in: Starts slow, and then maintains speed.
• ease-out: Maintains speed with a slow end.
• ease-in-out: Slow start and end, very similar to ease only that the latter starts faster than it ends.
• transition-delay: Specifies the delay time in seconds or milliseconds before the start of the transition.
• step-start: The animation immediately jumps to its final state.
• step-end: The animation remains in its initial state until the end, at which point it jumps directly to its final state.

Example: https://codepen.io/calerocl/pen/VBzBbW

Animations

Unlike transitions, which allow us to move from one state to another, animations allow us to modify the values ​​of CSS properties over time. The animations are composed of two elements, on the one hand the style that describes the CSS animation, and on the other its initial and final state, and sometimes intermediate points.
To make these changes we need @keyframes in which we define the different positions of the animation. We can use either 0% and 100%, or instead the words from and to.
Once the keyframe is defined, we go to the animation property followed by sub-properties. These allow us to change the rhythm and duration, as well as other details.

Animation subproperties:

• animation-delay: It is the time until beginning of the sequence of the animation.
• animation-direction: It indicates if the animation is forced to go back to the start frame when the sequence is finished, or if it must start from the beginning when it reaches the end.
• animation-iteration-count: The number of iterations (Repetitions) of our animation.
• animation-name: Specifies the name of the rule @keyframes.
• animation-duration: How long our animation covers (duration).
• animation-fill-mode: Which will be the values ​​of our properties when the animation is finished.
• animation-timing-function: Indicates the rhythm of the animation. That is, how the frames of the animation are displayed, establishing acceleration curves.
  animation-play-state: Pause or resume our animation.

Example: https://codepen.io/calerocl/pen/KBQGLN

We hope you practice your imagination and get a nice style to your website with the information we provided.