There is good evidence that the human brain is hard-wired for movement. Humans are more likely to focus on how elements move than on static elements.

CSS animation takes advantage of this human behavior. When animation is added to a website, it can draw the user’s attention to important areas of the product, creating a lasting effect and generally enhancing the experience.

In this article, we’ll review the benefits of CSS animation, the different CSS animation properties, and different examples where JavaScript developers can use CSS animation to make websites more interactive and user-friendly.

Each example comes with a Codepen demo and a detailed explanation to make the examples more realistic, practical, and valuable.

Overview of CSS animation

Before diving into how CSS animation works as a JavaScript developer, let’s quickly review what CSS animation really is, why you need to know about it, and how it affects the look and feel of a website.

What is CSS animation?

As the name implies, CSS animation allows the user to animate some CSS properties by following a declarative pattern that allows the user to specify how the CSS properties change over time.

CSS animation makes it possible to animate transitions from one CSS style configuration to another.

Why should you know CSS animation

The web development ecosystem has evolved to the point where JavaScript developers can’t avoid knowing and using CSS animations. A user interface without animation is like a video game without action, and no one likes to play text-only games anymore

Use CSS animations to answer the need for more interactive websites.

What positive impact does CSS animation have on your site?

Have you ever looked at a website and wondered if the page was loading or broken? This common experience can be frustrating for users you encounter.

By using CSS animations, developers can alleviate this frustration by adding a loading animation that signals to the user that something is happening and keeps them on the page longer.

Done well, animation can add valuable interaction, personality and an engaging user experience to a website’s interface.

Animation can make UI elements resemble the real world, allowing them to change smoothly while giving a sense of continuity, action, and progress, rather than blink of an eye. -Patricia Silva, “How to Animate CSS”

CSS animation explanation

Animation consists of two parts: a keyframe that describes the style of the CSS animation and a keyframe that represents the sequence of the animation styles.

Let’s break down the two parts so that we can understand them effectively.

Describes the style of the CSS animation

For each animation you create, you must describe the characteristics of that animation. This gives you complete control over what animations can and can’t do.

Examples of properties you can configure include the duration of the animation, direction, and number of repetitions.

To describe an animation, you can use the animation shorthand property or animation child property.

AnimationShorthand properties

The animation shorthand property is the shorthand of the eight animation child properties. It saves you from wasting time typing in child attribute names and provides animation for elements that require all eight child attributes.

/* Here's the syntax of the animation sleep property */. Element {animation: name duration timing-function delay iteration-count direction fill-mode play-state; }Copy the code

When you apply this code to an element, the animation shorthand property animates the element on the page with all eight child properties.

See the Pen Animation Shorthand properties – CSS animation tutorial for Didicodes (@edyasikpo) on CodePen.

Animation Child attributes

These eight child properties make up the actual animation shorthand property, which configures the animation of the element in the CSS. This is useful when you don’t want to use all the child attributes at the same time, or you forget the order in the animation attributes.

/* Here's the syntax of the animation sub-properties. */. Element {animation-name: name; animation-duration: duration; animation-timing-function: timing-function; animation-delay: delay; animation-iteration-count: count; animation-direction: direction; animation-fill-mode: fill-mode; animation-play-state: play-state; }Copy the code

Similarly, when you apply code to an element, it renders an animated square.

See the Pen Animation Sub-properties-CSS Animation Tutorial at Didicodes (@edyasikpo) on CodePen.

Note that you cannot use the shorthand property of the animation together with the animation child property, because they produce the same thing. They should be used separately depending on what you want to achieve.

You can learn more about each subattribute and its value in the MDN networking documentation.

When you go into keyframes, you must know that using styles to describe CSS animations is not feasible without keyframes to show the order of the animations.

For example, the following demo includes animation-name,animation-duration, and animation-timing-function child properties that should generate a heartbeat.

However, you cannot see any animation on the heart because the @Keyframes at-rule property is not configured yet.

See the PenA Heart-CSS Animations Tutorial at Didicodes (@edyasikpo) on CodePen.

use@keyframeTo represent an animation sequence

Keyframes describe the rendering of an animation element at a particular time in the animation sequence. Since the time of the animation is defined in the CSS style using the animation shorthand property or its subproperty, the keyframe uses percentages to represent the animation sequence.

To use keyframes, create an @keyframes at-rule with the same name as the one passed to the animation-name property. In the heartbeat demo, animation-name is heartbeat, so you must also name @keyframes at-rule heartbeat.

Each @keyframes at-rule contains a list of styles for a keyframe selector, specifying the percentage of animation to be animated when a keyframe occurs, and a block that contains the style for that keyframe.

@keyframes heartbeat { 0% { transform: scale(1) rotate(-45deg); Transform: scale(1.25) rotate(-45deg); } 40 {transform: scale(1.5) rotate(-45deg); }}Copy the code

0% represents the first moment of the animation sequence, while 100% represents the final state of the animation.

Now that you understand @keyframes, let’s include it in the heart demo and see if anything changes.

See the Pen Heartbeat – CSS animation tutorial for Didicodes (@edyasikpo) on CodePen.

As you can see, the heart is now beating!

When you add an CSS@keyframes at-rule, make the heart size from 0% to 40% as you set.

  • Zero percent of the time the conversion is not performed
  • Enlarging the size of the heart to 125% of its original size 20% of the time.Scale (1.25)
  • Enlarge the size of the heart 40% of the time to 150% of its original size.Scale (1.5)

Rotate (-45deg) is to keep the original orientation of the heart you created with CSS.

Examples of animations for JavaScript developers

In this section, we’ll review two examples where JavaScript developers can use CSS animation to make websites more interactive and improve the user experience.

Fill in a form

Tables are components that can be seen on almost every web site. More often than not, filling out an online form can be tedious.

In this example, you’ll see a login form and see how to control animations with JavaScript to make the site more interactive for users. When the user tries to add their email address and password to the login form below, no animation is applied to the form.

See Didicodes (@edyasikpo) ‘s Pen Form 1 – CSS Animations Tutorial on CodePen.

While a form without animation is perfectly fine, it is visually unattractive to the user and probably won’t hold their attention.

But on the animated login page below, the characters in the email and password fields move up at the same time as the user starts entering their information.

See Didicodes (@edyasikpo) ‘s Pen Form 2 – CSS Animations Tutorial on CodePen.

While it’s a subtle animation, it grabs the user’s attention and improves their experience in the following ways.

  • It indicates to the user that they have clicked on an input field
  • Users now know they can start typing

This can create a more user-friendly environment that is memorable and compelling.

Scroll through the page

When users scroll through a site without animation, they tend to miss important information.

Let’s scroll through two pages with lists of information, one with static elements and one with animated elements.

See Pen Scroll 1-CSS Animation tutorial by Didicodes (@edyasikpo) on CodePen.

See The PenScroll 2-CSS Animation tutorial by Didicodes(@edyasikpo) on CodePen.

Because the animation brings content from the left and right to the second list, it can slow the user down to make sure they read each option, unlike the first page without animation. It also helps users scroll all the way to the end to see all the information available.

That, my friend, is the power of adding animation to a website!

Need some animation inspiration?

Here’s a list of five companies that use CSS animation to create a better experience for their users. If you take a look at these sites, interaction is compelling, allowing you to scroll all the way to the end of the page or interact with one of the CTA’s on the page.

  • GitHub
  • Fragments of species
  • Lava
  • Netlify
  • Sequoir

Of course, these aren’t the only sites in the world that use CSS animation, but these five sites will likely give you the inspiration you need.

conclusion

In conclusion, as a JavaScript developer, CSS animations are the tools you need to create memorable experiences for your users. You can find all of Codepen’s CSS animations in this article.

If you have any questions, please share them in the comment section below and I will respond to each one.

The postGuide to CSS animation for JavaScript developersappeared first onLogRocket Blog.