HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation-timing-function Example</title>

  <style>

    @keyframes move {

      0% {

        left: 0;

      }

      100% {

        left: 300px;

      }

    }



    .box {

      width: 100px;

      height: 100px;

      background-color: blue;

      position: relative;

      animation-name: move;

      animation-duration: 4s;

      animation-iteration-count: infinite;

      animation-timing-function: ease-in-out;

    }

  </style>

</head>

<body>

  <h1>Animation Timing Function Example</h1>



  <div class="box"></div>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation-timing-function Property - ease-in-out