Prelude : How does it work and what can we do with it?

CSS Animations are a powerful tool for web developers to enchance the visual experience of a website.

They allow us to add dynamic, eye-catching effects to our website, making it more engaging interactive.

They are a big help to make websites more attractive overall.

Part 1 : What are CSS Animations?

CSS Animations are a way to animate elements on a web page using only CSS code. They work by defining keyframes, which specify the styles for the element at different points in the animation timeline.

By using transitions between these keyframes, we can create smooth and fluid animations.

Part 2 : How do they work?

To create CSS animation, we need to define two things:

1. Keyframes : It specifies the style for the element at different points in the animation timeline.
2. Animation property : It sets the animation’s behaviour, such as duration, easing and iteration count.

Part 3 : Deep dive into the CSS Animation

In the previous part, we mentioned that a CSS Animations has two parts to it, namely, keyframes and the animation properties.

Let us discuss about the following keywords associated with CSS Animations:

1. @keyframes
2. animation
3. animation-name
4. animation-delay
5. animation-direction
6. animation-duration
7. animation-iteration-count
8. animation-play-state
9. animation-timing-function

Part 3.1 : @keyframes

A set of animation keyframes are defined using the @keyframes rule using the following syntax, as given in the example below:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }
  50% {
     transform: translateX(300px);
  }
  100% {
    transform: translateX(300px) scale(1.5);
  }
}

As shown in the above example, the @keyframes rule includes three basic parts:

• The @keyframes rule followed by a custom animation name
• One or more keyframes, each with a percentage followed by a rule set surrounded by curly braces

In this first example of our CSS animations tutorial, We have defined the animation with the name moveObject. This can be any name we want, which has to be case sensitive. This custom name must match the name used in the animation-name property which we will discuss later.

In addition to this, in the above example, we can notice the use of percentages to define each of the keyframes in the animation. If the animation includes keyframes that equal 0% and 100%, we can alternatively use the from and to keywords:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }
  50% {
     transform: translateX(300px);
  }
  to {
    transform: translateX(300px) scale(1.5);
  }
}

We can summarise that the animation in this example includes three keyframes that represent steps in this animation sequence: the start, the 50% step, and the end (i.e. 0%/from, 50%, and 100%/to). Each of these uses what’s called a keyframe selector along with curly braces to define the properties at that step.

It is worth noting that keyframe rule sets in any order we want, and the browser will still run them in the order determined by their percentage. Also, we can omit the 0% and 100% keyframes and the browser will automatically determine these by the existing styles on the element being animated.

Part 3.2 : animation-name

Every CSS animation we create has to have a name that appears in the @keyframes syntax. This name has to be the same name defined using the animation-name property.

From the above example, we can apply the animation as a property along with other CSS properties onto any selections, as given below:

.box {
  animation-name: moveObject;
}

Again, the custom name that we have defined has to also exist as a name for a @keyframes at-rule — otherwise this name will do nothing.

Part 3.3 : animation-duration

It defines the amount of time an animation takes to run once from start to end. Negative values are invalid. This value can be specified in seconds as follows:

.box {
  animation-name: moveObject;
  animation-duration: 2s;
}

Part 3.4 : animation-timing-function

It is used to define the manner in which the CSS animation progresses. The declaration is as follows:

.box {
  animation-name: moveObject;
  animation-timing-function: linear;
}

This property accepts the following keyword values:

• ease (default value)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Part 3.5 : animation-iteration-count

The animation-iteration-count property lets us run an animation for a specific number of times, as shown in the example below:

.box {
  animation-name: moveObject;
  animation-iteration-count: 5;
}

The default value of the animation-iteration-count is 1, but the animation defined above will run 3 times. If required we can loop an animation to run by setting animation-iteration-count value to ‘infinite’.

Part 3.6 : animation-direction

The animation-direction property allows us to define which direction we want the animation to play. The syntax looks as follows:

.box {
  animation-name: moveObject;
  animation-direction: alternate;
}

We can set the value as one of four keywords:

• normal (default value) – The animation plays forwards on the first iteration
• reverse – Animation plays backwards on the first iteration
• alternate – The animation plays forwards on the first iteration then alternates on subsequent iterations
• alternate-reverse – Same as alternate but plays backwards on the first iteration

Part 3.7 : animation-delay

The animation-delay property allows us to slightly delay the animation start before the first iteration. Like other time based functions, we can define the delay in seconds. Following is the syntax:

.box {
  animation-name: moveObject;
  animation-delay: 2s;
}

In the above example, the animation will start with a delay of two seconds. It is important to note that the delay occurs only on the first iteration, not each iteration.

Part 3.8 : The Summary

The following table it a reference sheet to all of the animation properties we have discussed yet:

Property	Description
@keyframes	Specifies animation code
animation	A short-hand property for setting all the animation properties
animation-name	Specifies the name of the @keyframe animation
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwords or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-iteration-count	Specifies the number of times an animation should be played
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

Part 4 : animation shorthand property

Although it is possible to write all of the animation properties discussed above seperately, once there is a good understanding of each of the properties, we have the option to use the animation shorthand property, which lets us define all the longhand properties in a single declaration.

.box {
  animation: moveObject 3s ease-in-out 3s 2 forwards;
}

The above example can be analysed as follows:

animation: name duration timing-function delay iteration-count direction;

Part 5 : Where to use them?

CSS animations can be used in a variety of ways to enhance your website. Below are some examples of common use cases:

1. Adding a hover effect to button or links.
2. Creating a loading spinner or progress bar.
3. Animating elements as they enter or exit the veiwport.
4. Creating dynamic, eye-catching transitions between pages.

Part 6 : Browser Support

The only browser not supporting CSS Animations currently, is Opera Mini.

Also, @keyframes is not supported in an inline or scoped stylesheet in Firefox.

The Conclusion

CSS animations are a simple and effective way to add dynamic, eyecatching effects to our websites. By defining animations, we can create smooth and fluid animations that enhance the user experience.

Start experimenting with CSS animations today, and see what magic you can create!

Here are the slides of the presentation from the seminar as completed by Vidhi and myself on 15th February 2023 :