Animation Properties

7.1 animation-name Property

CSS animations let you create dynamic and smooth visual effects, enhancing the user interface and making it more interactive. Animation properties allow you to control various aspects of an animation, such as name, duration, timing function, and delay. Let's dive into these properties and demonstrate how to use them.

The animation-name property specifies the name of the animation that will be applied to an element. The name must match the name defined in the @keyframes rule.

Syntax:

    
      element {
        animation-name: animation-name;
      }
    
  

Where:

• animation-name: the name of the animation defined in @keyframes

Example:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Code Explanation:

• @keyframes moveRight: defines an animation named moveRight that moves the element to the right
• .box: an element with the applied animation moveRight

7.2 animation-duration Property

The animation-duration property specifies the length of time an animation should take to complete. The value is given in seconds (s) or milliseconds (ms).

Syntax:

    
      element {
        animation-duration: time;
      }
    
  

Where:

• time: the duration of the animation (e.g., 2s for two seconds or 500ms for 500 milliseconds).

Example:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

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

Code Explanation:

• animation-duration: 2s: sets the duration of the moveRight animation to 2 seconds

7.3 animation-timing-function Property

The animation-timing-function property specifies the speed curve of an animation over its duration. It allows you to create different animation effects, like acceleration or deceleration.

Syntax:

    
      element {
        animation-timing-function: function;
      }
    
  

Where:

• function: the timing function that defines the speed curve of the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out)

Example:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Code Explanation:

• animation-timing-function: ease-in-out: sets the timing function for the moveRight animation, making it smooth with a slow start and end and acceleration in the middle

Main Timing Functions:

• ease: animation starts slowly, speeds up in the middle, and slows down at the end
• linear: animation has a constant speed from start to end
• ease-in: animation starts slowly and then speeds up
• ease-out: animation starts quickly and then slows down
• ease-in-out: animation starts and ends slowly, with acceleration in the middle

7.4 animation-delay Property

The animation-delay property specifies a delay before the start of an animation. The value is given in seconds (s) or milliseconds (ms).

Syntax:

    
      element {
        animation-delay: time;
      }
    
  

Where:

• time: the delay before the start of the animation (e.g., 1s for one second or 500ms for 500 milliseconds)

Example:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Code Explanation:

• animation-delay: 1s: sets a delay before the start of the moveRight animation of 1 second

1

Task

Frontend SELF EN, level 24, lesson 1

Locked

Animation Timing

Animation Timing

Open

1

Task

Frontend SELF EN, level 24, lesson 1

Locked

Animation Delay

Animation Delay

Open