Css style

How to Create CSS Keyframe Animations

CSS gives developers the ability to bring their web pages to life using keyframe animations.

CSS animation is obtained by modifying the initial state of an HTML element through its various properties. Some general CSS properties that can be animated include:

  • Width
  • Height
  • Position
  • Color
  • Opacity

These general CSS properties are manipulated by specific CSS elements to create the desired result. If you’ve ever come across an animated element on a webpage, chances are the element was animated using keyframe animation.

What is a keyframes element?

the keyframes element can be used on one or more HTML elements to which it has access. It identifies a specific point in an item’s state and dictates what that item should look like at that time.

This may seem like a lot to digest, but it’s actually quite simple. the keyframes element has a fairly simple structure that can be easily understood and adjusted to meet all animation requirements.

Example of keyframe structure


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Suppose you want to animate a green rectangular button by turning it into a blue round button.

In the settings of the from section above you will need to place all the styling necessary to make the element look like a green rectangular button, then in the at section, you will place all style requirements to turn this button into a blue round button.

USE VIDEO OF THE DAY

If you’re thinking, “this doesn’t look too much like animation”. Well, that’s because a key component of this whole process has yet to be introduced—that component is the animation property.

The animation property

the animation property has a set of different sub-properties; these are used in combination with the keyframe structure above to animate the desired HTML element.

However, you only need to know about five of these sub-properties and their associated values ​​to achieve animation in your projects. These properties are known as:

  • Animation name
  • Animation-duration
  • Animation synchronization function
  • Animation delay
  • Number of animation iterations

Use animation on a web page

Using the scenario above, the goal is to create an animated button.

Example of button animation







Animation








The animation section of the code above contains the five previously mentioned sub-properties. Each property has a very distinct function and together they work to animate any HTML element they are intended to target.

Related: How to Target Part of a Web Page Using CSS Selectors

The Animation-name property

This property is the most important property in the list. Without the animation name property, you wouldn’t have an id to paste to the keyframes element, making all the code in its settings useless.

If you forgot to include one or two of the other subproperties, you could still have a pretty decent animation. However, if you forgot the animation name property you would have no animation.

The animation duration property

This property is used to set the time an animated element should take when transitioning from one state to another.

In the example above, the animation duration property is set to 5 seconds (5s), so the green rectangular button will have a total of 5 seconds before fully becoming a blue round button.

The Animation-delay property

This property is important for a reason; some web pages may take a few seconds to fully load (due to several different factors). Therefore the animation delay property prevents the animation from starting immediately in case the web page takes a while to load.

In the example above, the animation delay property is set to 4s, which means the animation will only start 4 seconds after the webpage is visited (which gives the webpage enough time to load before the animation starts).

The Animation-iteration-count property

This property indicates how many times the animated element should transition from one state to another. the animation-iteration-count property takes values ​​that are words and numbers. The number value can be anything from 1, while the word value is usually “infinite”.


In the example above, the animation iteration count value is set to “infinite“, which means that as long as the web page is active, the button property animates from state to state, continuously.

The Animation-timing-function property

This property dictates the movement of the animated element as it transitions from one state to another. the animation-timing-function property is usually assigned one of three fluency values.

  • Ease in
  • Ease of exit
  • Ease of entry and exit

the entry ease value is used above; this slowly transitions the animation from one state to another. If the goal is to create a slow transition as the button changes from a green rectangle to a blue circle, you would use the ease value. If you only wanted the slow transition in the opposite direction, you would use the easing value.

Reduce our code

In most cases, reducing the length of a program is considered a practical approach. This is mainly because fewer lines of code reduce the likelihood of errors going unnoticed in your programs.

The above code can be reduced to four lines. This can be achieved by simply using the animation property without explicitly identifying each of its sub-properties.

Shortening the code for the button animation example







Animation