Name: Web Animations API: Introduction
Description: Animate DOM elements with CSS properties like transforms and colors without downloading external tools

Animate DOM elements with CSS properties like transforms and colors without downloading external tools

Stop wrestling with heavy animation libraries by building smooth, performant JavaScript animations directly in the browser using the native Web Animations API. This tutorial shows you how to animate DOM elements with CSS properties like transforms and colors without downloading external tools, giving you lightweight frontend development solutions for modern web design.

<html>
<head>
  <style>
    body {
      background-color: #222;
      display: flex;
      justify-content: center;
    }

    .circle {
      border-radius: 100%;
      height: 200px;
      width: 200px;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="circle"></div>

  <script>
    document.querySelector('.circle').animate(
      [
        {
          marginTop: 0,
          backgroundColor: 'blue'
        },
        {
          marginTop: '450px',
          backgroundColor: 'red'
        }
      ],
      {
        duration: 1000,
        iterations: Infinity,
        direction: 'alternate',
        easing: 'ease-in-out'
      }
    );
  </script>
</body>
</html>