Introduction to Animation

2 min readMar 1, 2022

I am super excited that I am 2 days away from getting my new badge, i.e my 25th-day Milestone… 🙅🏽 Although I am tired from the day, but I am super happy with all the progress I have made…😇

Animation

We all love moving things, right ;) To make a website more interactive and dynamic, adding animation effects always comes in handy.

Keyframes

In CSS, the animation is a smooth transition of an HTML element from one style to another. The animation consists of different frames that gradually replace one another.

You can create keyframes, that is, properties that should be applied to an element at a given time. The browser calculates the intermediate values between these frames.

The @keyframes rule

Keyframes are the basis of CSS animation. They determine what the animation looks like at each point of the timeline. Keyframes are created using the @keyframesrule:

Each @keyframes consists of the following parts:

Animation name: to describe your animation.
Animation steps: represented in percentages. 0% represents the initial state of the animation, and 100% represents its final state; you can create up to 100 steps.
CSS properties: can be defined for each step of the timeline.

Animation for changing font size:

In this example, when animation is 0% complete, the height of the element is 10%. When the animation is 50% complete, the height is increased to 30%. In the final state, the height is back to 10%.

Instead of 0% and 100%, you can use the keywords from and to . The above code can be represented as:

If 0% or 100% are not specified, the browser creates them using initially set values of the animated property.

Applying keyframes to the element

In order for the animation to start, we need to know two basic CSS properties:

animation-name: the value of this property is the name of the animation as defined in @keyframes.
animation-duration is responsible for the duration of the animation. The duration can be specified in seconds (for example, 2s) or milliseconds (200ms).

The previous font change animation can be applied to <h1> element like below:

h1 {
  animation-name: change-font-size;
  animation-duration: 3s;
}

animation-iteration-count indicates how many times an animation cycle is played. The value for this property can be from 0 to infinite (animation played endlessly) Negative numbers are not accepted.

animation is the general universal property to write all three properties above, animation: change-font-size 2s 3;

Crossbrowser

If you want to use animation in earlier browser versions (pre-2017), you need to duplicate the properties and the @keyframes rule with the appropriate prefixes: -webkit- for versions of Chrome, Safari, Android, -moz- for Mozilla Firefox, and -o- for Opera.

That is all in animations today.. =D Lets pick this up tomorrow again…👋