css
  1. css-animation
PreviousNext

CSS Animation

  • CSS animations add motion and visual interest to web pages.
  • Animations can be applied to elements, such as text or images, using simple CSS code.
  • In this article, we will introduce the syntax and example of CSS animation.

Syntax

selector {
  animation-name: Name_of_the_animation;
  animation-duration: Duration;
  animation-timing-function: Linear/Ease/Steps;
  animation-fill-mode: Forwards/Backwards, etc.;
  animation-delay: Delay_the_start_of_the_animation;
  ...
}

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animation Example</title>
    <style>
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: red;
      animation-name: move;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes move {
      50% {
        transform: translateX(200px);
      }
      100% {
        transform: translateY(200px);
      }
    }
    </style>
</head>
<body>
    <h1>CSS Animation Example</h1>
    <div class="circle"></div>
</body>
</html>
Try Playground

Explanation

The CSS animation is applied to the .circle class using the animation-name property. The move keyword refers to the @keyframes rule that describes how the element should move. After that, the duration and timing-function are specified. Here, we set the duration to 3 seconds, and the timing function is set to linear, which means it moves at a constant speed; the animation-iteration-count is set as infinite which indicates that the animation should run indefinitely.

In the @keyframes rule, we specify the transform property to describe the movement of the circle.

Use

CSS animation can be used to add visual interest to web pages. It can be employed to create interactive web elements such as menus, buttons, and animations of various kinds. CSS animation’s easy-to-use syntax makes it a convenient tool to give a modern and professional feel to a web page.

Important Points

  1. CSS animations are created using the @keyframes syntax, which allows the designer to define the behavior of the animation at different points in time.

  2. There are different animation properties like duration, timing function, animation-fill-mode, delay, etc., that allow designers to control the behavior of the animations.

  3. Various WebKit-based browsers support a prefix -webkit-, which should be included before CSS animation properties.

Summary

CSS animation is an effective way of adding motion and visual interest to web pages. It can be used to enhance the interface of a website and to create visualizations or interactive elements that engage a user. With its easy-to-use syntax, CSS animation is an excellent tool that can take a website to the next level.

Cursor@keyframes
Published on: