What are Discrete Animations in CSS?

In this article, we’ll explain what discrete animations are and how to implement them in CSS. Discrete animations are animations that occur at discrete intervals, where each frame is distinct and there are no smooth transitions. This type of animation gives the user a distinct sense of frame change and is often used in games or other scenarios where action needs to be emphasized.

Read more: CSS Tutorial

CSS Keyframe Animation

CSS keyframe animation is a common method for achieving discrete animation effects. It defines the animation effect through a series of keyframes, each representing the state of the animation at a specific moment. Between keyframes, the browser automatically calculates the intermediate transitions to create a smooth animation effect.

Here’s an example showing how to use CSS keyframe animation to create a discrete blue square:

@keyframes discrete {
0% { background-color: blue; }
50% { background-color: yellow; }
100% { background-color: blue; }
} 

.box {
width: 100px;
height: 100px;
background-color: blue;
animation: discrete 1s infinite;
} 

In this example, we define a keyframe animation called “discrete.” Its first keyframe (0%) sets the background color to blue, the middle keyframe (50%) sets it to yellow, and the last keyframe (100%) sets the background color back to blue. In the .box class, we apply an animation to the box, setting an animation duration of 1 second and an infinite loop.

This example shows that the box flashes between blue and yellow in a discrete pattern. Each color change is abrupt, with no smooth transition.

CSS Discrete Delayed Animations

In addition to keyframe animations, CSS provides other methods for creating discrete animation effects. One of these is the animation-delay property, which delays the start of an animation by a certain amount, creating a discrete effect.

Here is an example showing how to use the animation-delay property to create discrete blocks that appear 0.5 seconds apart:

.box { 
width: 100px; 
height: 100px; 
background-color: blue; 
animation: discrete-delay 1s infinite; 
} 

@keyframes discrete-delay { 
0% { background-color: blue; } 
50% { background-color: yellow; } 
100% { background-color: blue; } 
} 

.box:nth-child(2) { 
animation-delay: 0.5s; 
} 

.box:nth-child(3) { 
animation-delay: 1s; 
}

In this example, we define a keyframe animation called “discrete-delay,” similar to the previous example. By adding different animation-delay values ​​to the second and third squares, their animations will start at different times. This creates a discrete effect with a 0.5-second delay between each square.

Summary

Discrete animations are animations that occur at discrete intervals without smooth transitions. CSS keyframe animations are a common method for achieving discrete animations, defining the animation effect through a series of keyframes. Alternatively, by using the animation-delay property, we can delay the animation’s start time to create a discrete effect. Both methods are effective for achieving discrete animation effects, and developers can choose which one to use based on their needs.