Articles
Introduction to CSS
Animation-related CSS Properties

Animation-related CSS Properties

This article explains animation-related CSS properties.

You can learn about the usage and syntax of @keyframes, animation, and transition properties.

YouTube Video

HTML for Preview

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animation & Transition

@keyframes Rule 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes is used in CSS animations to specify how styles change during the animation. In @keyframes, the style changes from the start to the end of the animation are specified by time percentages or keywords (from and to).

  • This is an example of an animation where an element slides from left to right and returns to its original position.
  • In this example, slide is written after @keyframes, defining an animation named slide.
  • 0% is the start of the animation, with translateX(0) positioning the element at its original location.
  • 50% is midway in the animation, where the element moves 200px to the right using translateX(200px).
  • 100% is the end of the animation, with the element returning to its original position.
  • In the box-animation-slide class, the animation property is used to apply the slide animation at 3-second intervals.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • You can finely control the styles during an animation. By specifying percentages, you can apply different styles at arbitrary timings.
    • In this example, the color changes gradually from red to blue to green to yellow and back to red.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • In this example, from is equivalent to 0% and to is equivalent to 100%. This allows you to define simple animations.

Basic Syntax 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: The name of the animation. This is specified using the animation property or the animation-name property.
  • Percentage or Keywords: Use percentages from 0% to 100%, or the keywords from (equivalent to 0%) and to (equivalent to 100%).

animation Property 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

The animation property is used to apply animations to an element. Animations define how a set of CSS styles change over time. With the animation property, you can control the timing, behavior, delay, number of repetitions, and more of an animation.

  • The box-animation-ease-in-out class specifies slide as the animation-name, and uses the slide animation defined in @keyframes.
    • 3s is the animation-duration, meaning each animation cycle completes in 3 seconds.
    • ease-in-out is the animation-timing-function, which causes the animation to start slowly, accelerate, and then slow down again at the end.
    • infinite is the animation-iteration-count, meaning the animation will repeat indefinitely.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • The box-animation-alternate class specifies color-change as the animation-name, and uses the color-change animation defined in @keyframes.
    • The 1s following ease-in-out is the animation-delay, specifying the delay before the animation starts. The animation will start 1 second later.
    • The 3 following 1s is the animation-iteration-count, meaning the animation repeats 3 times.
    • alternate is the animation-direction, specifying the direction of animation playback. The alternate specifies that the animation plays alternately.

Composition of the animation Property

The animation property is a shorthand property that combines several sub-properties into one. Here are the main sub-properties:.

  • animation-name property: Specifies the name of the animation to apply. It must match the name of the animation defined in @keyframes.
  • animation-duration property: Specifies the time it takes for the animation to complete one cycle. The time units are seconds (s) or milliseconds (ms).
  • animation-timing-function property: Specifies the speed curve of the animation. Values such as ease, linear, ease-in, ease-out, ease-in-out, etc. are used.
    • Specifying ease starts the animation slowly, speeds it up, and then slows it down again at the end.
    • Specifying linear makes the animation progress at a constant speed from start to finish.
    • Specifying ease-in starts the animation slowly and ends it quickly.
    • Specifying ease-out starts the animation quickly and ends it slowly.
    • Specifying ease-in-out starts slowly, progresses quickly, and ends slowly.
  • The animation-delay property specifies the delay before the animation starts. The time unit is either seconds or milliseconds.
  • The animation-iteration-count property specifies the number of times the animation should repeat. Specifying infinite will repeat the animation indefinitely.
  • The animation-direction property specifies the direction of the animation playback. Options include normal (forward direction), reverse (backward direction), alternate (play alternately), and alternate-reverse (play alternately starting backward).
  • The animation-fill-mode property specifies the state of the animation before it starts and after it ends. You can specify any of none, forwards, backwards, or both.
  • The animation-play-state property specifies whether the animation is running or paused. You can specify running or paused.

Summary

The animation property is a powerful tool to dynamically change the style of elements. Using @keyframes, you can define how styles change over time and control detailed behavior of the animation with each sub-property of animation.

transition property 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

The transition property is used to apply animation effects to CSS style changes. It allows changes to appear smooth during state changes like hover, focus, active, or when styles are dynamically changed by JavaScript.

Let's look at an example of the transition-box class where the background color changes smoothly when hovering over a button. - In the transition-box class, the transition property applies a 2-second transition to the background color change. The change is specified as ease, making it smooth. - The hover pseudo-class changes the background color from lightgray to steelblue when the mouse hovers over the button. This change occurs smoothly over the 2-seconds specified in the transition-box class.

It's possible to apply transition to multiple properties simultaneously. - In the transition-2-properties class example, the background color changes in 5 seconds and the width changes in 0.5 seconds.

Basic Syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • The property specifies which CSS properties the animation should be applied to. Specifying all applies the animation to all properties.
  • The duration specifies the time it takes for the animation to complete. Specify using seconds (s) or milliseconds (ms).
  • The timing-function specifies the change in speed of the animation. You can use options like ease, linear, ease-in, ease-out, ease-in-out, etc.
  • The delay specifies the delay time before the animation starts. Specify in seconds or milliseconds.

Detailed properties of transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

The transition can also be used as individual properties as follows.

  • transition-property: Specifies the property to which the animation is applied.
  • transition-duration: Specifies the duration until the animation is completed.
  • transition-timing-function: Specifies the progression speed of the animation. Options like ease, linear, ease-in, ease-out, ease-in-out can be used.
  • transition-delay: Specifies the delay time before the animation starts.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS Properties Related to Filter Effects