In this code, the div has an animation-name and animation-duration set. The animation-name is "example" and the animation-duration is four seconds.

    <!DOCTYPE html>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    @keyframes example {
      from {background-color: red;}
      to {background-color: yellow;}
    <h1>CSS Animation</h1>
    <p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.