Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS animations using keyframes

Saturday, July 23rd, 2016 by Servage

css-animationsAnimated elements are often made with JavaScript, jQuery or other JavaScript libraries. However, it is also possible to create animations using only CSS. CSS3 includes a feature called keyframes that can be used to smoothly animate divs, text, height or position of an element and many other CSS properties.

Animating an element is a two-step operation. The animation rule must be declared first and then it must be assigned to an element.

The @keyframes rules

An animation can be created using the @keyframes rule followed by the name of the animation. For example, the following code declares an animation called my-animation: @keyframes my-animation { }.

What the animation does depends on what is stated inside the curly brackets. The animation is constructed from multiple keyframes defined as percentages from 0 to 100%. When the animation reaches a specific point, all CSS properties inside the keyframe (the percentage) are applied to the animated element. A keyframe is created using a percentage value followed by a pair of curly brackets, for example: 100% { }. CSS properties can be set inside the curly brackets, and they will be applied when, in this case, the element reaches the end of the animation.

To animate the height of an element, create a keyframe inside the @keyframes rule. To smoothly change the height to 250px during the animation, the following keyframe can be used: 100% { height: 250px; }. This is all you need to create a simple animation! Note that the element must already have an existing height property.

To add multiple keyframes to a single animation, you can create a list of them inside the @keyframes rule. When the curly bracket for the previous keyframe ends, start a new one by defining a new keyframe using a percentage and a pair of curly backets. There is no limit on how many keyframes an animation can have. You can also use decimals with the percentages for improved precision!

Applying animations to elements

The @keyframes rule does not do anything on its own. It must be applied to an element to trigger it. This can be done with the animation CSS property. In the example above, we created a keyframe called my-animation. This animation can be applied to an element using the following syntax: animation: <animation-name> <length> <times>. For example: animation: my-animation 5s 3. This would animate an element for 5 seconds 3 times before stopping. Remember to apply the animation property to the target element, not inside the @keyframes rule!

To create a never-ending loop, replace 3 with infinite. As the name suggests, this will run the animation infinitely.

Looping animations

One downside in keyframe animations is that the animation does not return to its original position when it is over. Fortunately, this can be solved by creating the same animation but backwards, starting from a keyframe at 50%. Simply add the same keyframes but animate the element to the opposite direction to smoothly return it back to its original position.

CSS animations using keyframes, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.