CSS animation is achieved by altering 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 have ever come across an animated element on a web page, chances are that the element was animated using keyframes animation.
What Is a Keyframes Element?
The keyframes element can be used on one or more HTML element that it has access to. It identifies a specific point in the state of an element and dictates the appearance that this element must have at this time.
This might sound like a lot to digest, but it is actually quite simple. The keyframes element has a pretty straightforward structure that can easily be understood and adjusted to fit any animation requirements.
Keyframes Structure Example
Let’s say you want to animate a green rectangular button by turning it into a blue round button.
Within the parameters of the from section above you will need to place all the styling necessary to have the element looking like a green rectangular button, then in the to section, you will place all the styling requirements to transform this button into a blue round button.
If you’re thinking, “that doesn’t sound too much like animation”. Well, that’s because a key component of this entire process is yet to be introduced—this 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 keyframes structure above to animate the desired HTML element.
However, you only need to know five of these sub-properties and the values that are associated with them, to achieve animation in your projects. These properties are known as:
Animation-name Animation-duration Animation-timing-function Animation-delay Animation-iteration-count
Using Animation on a Web Page
Using the scenario above, the goal is to create an animated button.
Button Animation Example
The animation section of the code above contains the five sub-properties that were mentioned earlier. Each property has a very distinct function and together they work to animate any HTML element that they are made to target.
The Animation-name Property
This property is the single most important property on the list. Without the animation-name property, you would have no identifier to past to the keyframes element, rendering all the code within its parameters useless.
If you forgot to include one or two of the other sub-properties then you still might have a fairly decent animation. However, if you forgot the animation-name property you would have no animation.
The Animation-duration Property
This property is used to define the amount of time an animated element should take when transitioning from one state to the next.
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 it fully becomes a blue round button.
The Animation-delay property
This property is important because of one reason; some web pages might take a few seconds to load completely (because of several different factors). So the animation-delay property prevents the animation from starting immediately just in case the web page takes some time to load.
In the example above, the animation-delay property is set to 4s, which means that the animation won’t begin until 4 seconds after the webpage is visited (giving the web page enough time to load before the animation begins).
The Animation-iteration-count Property
This property states how many times the animated element should transition from one state to the next. The animation-iteration-count property takes values that are words and numbers. The number value can be anything from 1 upwards, 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 up the button property will animate from one state to the next, continually.
The Animation-timing-function Property
This property dictates the motion of the animated element as it transitions from one state to the next. The animation-timing-function property is usually assigned one of three ease values.
Ease-in Ease-out Ease-in-out
The ease-in-out value is used above; this slowly transitions the animation from one state to the other. If the goal is to create a slow transition when the button is transforming from a green rectangle to a blue circle you would use the ease-in value. If you only wanted the slow transition in the opposite direction you would use the ease-out value.
Reducing Our Code
In most instances, reducing the length of a program is seen as a practical approach. This is mainly because fewer lines of code reduce the likelihood of errors going unnoticed in your programs.
The code above can be reduced by four lines. This can be achieved by simply using the animation property without explicitly identifying each of its sub-properties.
Reducing the Code for the Button Animation Example
In the code above, one line of code is used to achieve the same result that previously took five lines of code—that’s how you produce cleaner code.
Now You Can Animate Your Web pages
You now have the skills required to animate any HTML element on a web page. You should also have an understanding of how the animation property and the keyframes element work together to make CSS animation possible.
The animation property with its list of extensive sub-properties is no doubt interesting. Still, there is a wide spectrum of other CSS properties that you might find useful.
Image Credit: Josh Riemer/Unsplash
