Animation in web design is not a new concept. Before CSS3, Flash and JavaScript were the techs of choice used to move items and elements on a screen. Animations are a UX delight.

Animations add a better user experience to a page since we humans tend to interact better with a dynamic environment. Animations also add individuality and personality to a web visual. Personally, I find it more interesting waiting on a page with animated loading than one with the default bland and static loading screen.

What is Animation

CSS animations are changes, movements, continuity and actions of elements on a web page. They make a site more dynamic and livelier. The CSS transition property already takes care of movements and changes on a web page so why do we need animations?

1. Animations allow you to gain more control over the process.
2. They are flexible and dynamic.
3. Transitions are for simple changes while changes in animations can be more complex.
4. Transitions cannot change the properties attached to them; they only define their actions. Animations can change CSS properties and values inside the keyframes.
5. Transition ties to three distinct states – start, end, and duration. Animations are free from the dependency of any state - they can come into play whenever.
6. Animations can loop, while transitions cannot.

NOTE: Animations will require you to write more code than you would with transitions, so if what you want is a simple movement or action, it is best to stick with the transition method.

Advantages of CSS Animation over Flash, Videos and JavaScript

Flash (before it was stopped) and JavaScript used to be go-to when creating animations. Today, people also substitute videos and gifs for animated sections. Why is it necessary to use animations instead of these other options?

1. Creating CSS animations requires knowledge in CSS only. Writing animation code with JavaScript necessitates some experience in this programming language.
2. Animations, unlike videos, do not need to be loaded externally. They run in the browser directly, lessen the overall load time, are more compatible, and have better responsiveness.
3. Browsers without JavaScript enabled will not run JavaScript code
4. The browser controls the animation process, and so it optimizes the performance and makes for a smooth-running operation.

Basics of Animation

Animation requires just three basic things

• Keyframes: They define the styles or appearance of the element and must be defined.
• Properties: These are the animation properties attached to the keyframe
• Duration: The duration of the entire process

Properties associated with Animation and @keyframes

Some of the properties of animations are:

• Animation-name: This defines the name of the @keyframes animation. This name is like a variable and it is up to the developer to specify.
• Animation-duration: This defines the time it takes for the animation to complete one cycle. Specifying a duration is essential because if it is not set, no animation will occur. The animation needs a timeframe. The value for this is an integer in seconds, and the min value is 0s.
• Animation-delay: The time delay between the element load time and the beginning of the animation sequence.
• Animation-timing-function: This defines the time or speed at which the animation changes from one style or state to another. It has the values as transition-timing-function - linear, ease-in, ease-out, step-start, step-end, and cubic-bezier.
• Animation-iteration-count: This defines the number of times an animation should be repeated.
• Animation-fill-mode: This defines values or styles performed by the animation before the sequence starts, after it has ended or both. It takes values like forwards and backwards.
• Animation-play-state: This defines if an animation is running or paused, and users have the luxury to control this action. For example, if a user hovers over a running animation, it pauses. Animation-play-state takes running and paused as values.
• Animation-direction: This defines the direction of the animation. Right, left, or alternate.

Animation Shorthand

Animation is the shorthand property of all the other sub-properties already listed.

How it works

Once a keyframe is defined, the animation sequence is configured in percentage to specify the start and end progress of the animation. 0% is usually the start value and 100% the end. You can replace these two with from and to. In between 0 and 100, intermediate stages can be specified, like 25%, 68%, etc., telling the browser what to do at each stage.
You can write multiple animations and keyframes for one element, and a comma separates these. I will be showing you using different demos the many ways you can use CSS animations.

Simple animation of a rolling ball

In the simple demo below, I have animated a rolling ball that changes background color at various stages and goes from a ball to a square while in transit. The animation properties in this dynamic design demo are animation-name, animation-timing-function, animation-duration, and animation-iteration-count, in that order.

<html>
  <body>
    <div></div>
  </body>
</html>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  border-radius: 50%;
  animation: rollingball linear 2s infinite;
} 
@keyframes rollingball {
  0% { 
    left: 0px;
  } 
  25% { 
    background: purple;
    border-radius: 0;
  } 
  75%{ 
    background: orange;
  } 
  100% { 
    background: green;
    left: 300px;
  } 
}

In this demo, the ball moves only in the right direction. When it completes 300px, it moves back to the 0px starting point and starts all over again. This movement does not look nice. However, after adding in animation-direction with value alternate, the ball moves nicely forward and backwards and continues with this loop.

animation: rollingball linear 2s infinite alternate;

Animation on Text

In this demo, we will create a reflected blinking text that fades at 50%.

<h3>69 beep</h3>

@keyframes text-blink {
  50% {
    opacity: 0;
  }
}
h3 { 
  animation: text-blink 15s ease infinite; 
  font-family: 'Georgia', serif; 
  font-size: 7em; 
  text-align: center; 
  background: -webkit-linear-gradient(90deg, red 45%, green 58%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  -webkit-box-reflect: below 2px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));   
}

To pause this animation, I will use the animation-play-state, and this effect will take place when I hover over the text. The same effect can apply to the rolling ball animation.

h3:hover{ 
  animation-play-state: paused; 
}

Animation on background-colors

<div></div>

div {
  width: 100%;
  height: 100%;
  animation: color 5s infinite;
}
@keyframes color {
  0% {
    background-color: orange;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: yellow;
  }
}

Animation of balls with delay

I have stimulated the animation of three falling/bouncing in this demo, each with a specific time delay.

<div class="container">
  <div id="ball1" class="ball"> </div>
  <div id="ball2" class="ball"> </div>
  <div id="ball3" class="ball"> </div>
</div>

@-webkit-keyframes bouncingball { 
  0%   {transform: translateY(10px);} 
  50%  {transform: translateY(150px);} 
  100% {transform: translateY(2px);} 
} 
.container{ 
  background-color: #000; 
  height:220px; 
} 
.ball{ 
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  margin: 20px;
}
#ball1{ 
  -webkit-animation: bouncingball 8s ease-out infinite; 
  background: red; 
} 
#ball2{ 
  -webkit-animation: bouncingball 4.3s linear infinite; 
  background: yellow; 
} 
#ball3{ 
  -webkit-animation: bouncingball 5.5s linear infinite; 
  background: green; 
}

Animation on Images

This demo is a simple effect that zooms in on an image from the top (click the image or tap it on mobile).

<img class="img" src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />

@keyframes animatedimg { 
  0% { 
    transform: scale(1) translateY(0); 
    transform-origin: 50% 16%; 
  } 
  100% { 
    transform: scale(1.25) translateY(-15px); 
    transform-origin: top; 
  } 
} 
.img {
  animation: animatedimg 5s ease-out both; 
}

Many effects could apply to any properties. The next demo rotates and scales an image, and it focuses heavily on the transform properties (click or tap the image to see the rotation effect).

<img class="rotate-and-scale" src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />

@keyframes rotate-scale { 
  0% { 
    transform: scale(1) rotateZ(0); 
  } 
  50% { 
    transform: scale(2) rotateZ(180deg); 
  } 
  100% { 
    transform: scale(1) rotateZ(360deg); 
  } 
} 
.rotate-and-scale { 
  animation: rotate-scale 0.65s linear both; 
  width: 300px;
}

Animation on flexbox

You can use animations for layout properties, including grid and flexbox. This demo grows a flexbox by 5points. Click or Tap box 2 to see the effect.

<div class="containerbox">
  <div class="box">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box">Box 3</div>
</div>

.containerbox { 
  height: 300px; 
  border: 1px solid black; 
  display: flex; 
} 
.box { 
  font: 16px; 
  background: pink; 
  flex-grow: 1; 
}
.box2 { 
  background: orange; 
  animation: flexanimation 1s ease-out 1s 5 alternate backwards; 
}
@keyframes flexanimation { 
  100% { 
    flex-grow: 5; 
  }
}

Simple text loader animation

Instead of the traditional spinning circle for loading, more developers are getting creative about displaying items during loading. Some redecorate the spinning circle; others use animated text and images.
In this demo, I have created a pulsating text to be shown instead of a spinning circle.

CodeCodaBlog

<h1 class="loader-text">CodeCodaBlog</h1>

.loader-text { 
  text-shadow: 2px 1px 5px grey; 
  font-size: 4em; 
  text-align: center; 
  animation: pulsate 0.5s ease-in-out infinite both; 
} 
@keyframes pulsate { 
  0% { 
    transform: scale(1); 
  } 
  50% { 
    transform: scale(0.9); 
    color:blue; 
  } 
  100% { 
    transform: scale(1); 
    color: grey; 
  } 
}

We could set a timer and an onload function with a little JavaScript and take the user to the next page after the loading completes.

Precautions when using animations

• Try not to use too much of it, or else you risk turning it into a nuisance.
• The browser cannot handle too much CSS delays. If you have more than three sequences running, intertwined to each other, it is best to use JavaScript.
• Choose animation sequences wisely. Some browsers will not support some sequences.

Conclusion

Animations are fun to use and implement on a browser. The advantages of animation are prolific, and range of what they can do is vast. They have been a part of CSS3 since 2011. Although the latest versions of some modern browsers support them, they still require vendor prefixes so that older browsers and versions can display them correctly.
Not all properties are a subject of animatable. You can find a complete list of animatable properties here at MDN.
Working with CSS animations might take a while to master. I suggest that you initially play around with it, allow your imaginations to go wild, and see what works and what doesn't. As you gain more skills and experience with CSS animations, you will eventually bring more vigor and interactivity into your web tools and effectively use dynamic design to enhance users' browsing experience.