Animation Properties in CSS

« Prev Next »

In addition to the two properties mentioned above you can also specify these properties for keyframe animations:

 

Duration (animation-duration)

Specifies how long the animation will take to complete one cycle.

 

animation-duration: 3s;

Timing Function (animation-timing-function)

Defines the speed curve of the animation.

 

  • ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...)
animation-timing-function: ease-in-out;

Delay (animation-delay)

Sets a delay before the animation starts.

 

animation-delay: 1s;

Iteration Count (animation-iteration-count)

Defines how many times the animation will run.

 

animation-iteration-count: infinite; /* Or a number, e.g., 3 */

Direction (animation-direction)

Defines the direction of the animation.

normal, reverse, alternate, alternate-reverse

animation-direction: alternate; /* Alternates the animation each time */

Fill Mode (animation-fill-mode)

Controls how the element is styled before and after the animation runs.

none, forwards, backwards, both

animation-fill-mode: forwards; /* Keeps the final state of the animation */

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complete Keyframe Animation</title>
  <style>
    @keyframes fullAnimation {
      0% {
        transform: rotate(0deg) scale(1);
        background-color: #3498db;
      }
      50% {
        transform: rotate(180deg) scale(1.5);
        background-color: #e74c3c;
      }
      100% {
        transform: rotate(360deg) scale(1);
        background-color: #2ecc71;
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      animation: fullAnimation 4s ease-in-out 1s 3 normal forwards;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.