<!DOCTYPE html>
<html>

<head>
  <title>
    Pulse Animation - CSS
  </title>

  <style>
    .element {
      height: 500px;
      width: 200px;
      margin: 0 auto;
      background-color: lime;
      animation-name: stretch;
      animation-duration: 4.0s;
      animation-timing-function: ease-in-out;
      animation-direction: reverse;
      animation-iteration-count: infinite;
      animation-play-state: running;
    }

    @keyframes stretch {
      0% {
        transform: scale(.5);
        background-color: blue;
        border-radius: 100%;
      }

      50% {
        background-color: orange;
      }

      100% {
        transform: scale(2.0);
        background-color: green;
      }
    }

    body,
    html {
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="element"></div>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.