Keyframes and Animations

CSS keyframe provide a way to animate elements by defining a series of styles at various points along the animation timeline. These animations can create complex and smooth transitions between different styles.

1. Defining @keyframes

Keyframes are defined using the @keyframes rule. Within this rule, you specify the animation's name and the keyframes that define the styles at various points in the animation timeline. There are two ways to define our timeline in @keyframes:

1. fromto

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

2. percentage

@keyframes example {
    0% { background-color: red; }
    50% { background-color: green; }
    100% { background-color: yellow; }
}

• You can use as many percentage timeline as you want, till 100%

2. Animation Properties

Once keyframes are defined, you apply them to an element using various animation properties.

• animation-name: Specifies the name of the keyframes to apply to the element.

• animation-duration: Specifies how long the animation should take to complete one cycle.

• animation-timing-function: Specifies the speed curve of the animation.

• animation-delay: Specifies when the animation should start.

• animation-iteration-count: Specifies the number of times the animation should be played.

• animation-direction: Specifies whether the animation should play in reverse on alternate cycles.

• animation-fill-mode: Specifies how a CSS animation applies styles to its target before and after it is executing.

• animation-play-state: Specifies whether the animation is running or paused

1. animation-name

.element {
    animation-name: example;
}
/* Specifies the name of the keyframes animation to be applied */

2. animation-duration

.element {
    animation-duration: 4s;
}
/* Specifies the length of time that the animation should take to complete one cycle. Values are in seconds (s) or milliseconds (ms) */

3. animation-timing-function

.element {
    animation-timing-function: ease-in-out;
}
/* Specifies the speed curve of the animation. Common values include ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier */

4. animation-delay

.element {
    animation-delay: 1s;
}
/* Specifies a delay before the animation starts. Values are in seconds (s) or milliseconds (ms) */

5. animation-iteration-count

.element {
    animation-iteration-count: infinite;
}
/* Specifies the number of times the animation should be played. Values can be a number or infinite for continuous looping */

6. animation-direction

.element {
    animation-direction: alternate;
}

• normal: Animation plays forward.

• reverse: Animation plays backward.

• alternate: Animation alternates between forward and backward on each iteration.

• alternate-reverse: Animation alternates, but starts backward.

7. animation-fill-mode

.element {
    animation-fill-mode: forwards;
}

• none: Default. The animation will not apply any styles to the target before or after it runs.

• forwards: The target retains the style values defined in the last keyframe.

• backwards: The target retains the style values defined in the first keyframe.

• both: The animation will follow the rules for both forwards and backwards.

8. animation-play-state

.element {
    animation-play-state: paused;
}

• running: The animation is currently running.

• paused: The animation is currently paused.

3. animation shorthand property

The animation is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

selector {
    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
}

Example using all of the properties

.animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: colorChange 4s ease-in-out 1s infinite alternate forwards running;
}

@keyframes colorChange {
    0% { background-color: red; }
    50% { background-color: green; }
    100% { background-color: yellow; }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Shorthand Example</title>
</head>
<body>
    <div class="animated-box"></div>
</body>
</html>

• In this example, the animation shorthand property is used to define all the animation properties in a single line:

.animation {
    animation: colorChange 4s ease-in-out 1s infinite alternate forwards running;
}

• colorChange: This is the animation-name, specifying the keyframes to use.

• 4s: This is the animation-duration, defining the length of time the animation takes to complete one cycle.

• ease-in-out: This is the animation-timing-function, specifying the speed curve of the animation.

• 1s: This is the animation-delay, specifying the delay before the animation starts.

• infinite: This is the animation-iteration-count, specifying that the animation should repeat infinitely.

• alternate: This is the animation-direction, specifying that the animation should alternate directions on each iteration.

• forwards: This is the animation-fill-mode, specifying that the animation should retain the styles defined in the last keyframe when the animation is complete.

• running: This is the animation-play-state, specifying that the animation is currently running.