<div class="container">
<h1>WAAPI</h1>

<h1>WAAPI</h1>
</div>
body {
  font-family: helvetica;
}

.container {
   display: flex;
  margin: 70px auto;
  max-width: 500px;
  justify-content: space-between;
}

h1 {
  width: fit-content;
}
var h1s = document.querySelectorAll("h1");

var frames = [
  {transform: 'rotate(0)', easing: 'ease-out'},
  {transform: 'rotate(180deg)', easing: 'ease-out'},
  {transform: 'rotate(0)'}
]

var frames2 = [
  {transform: 'rotate(0)'},
  {transform: 'rotate(180deg)'},
  {transform: 'rotate(0)'}
]

var options2 = {
  duration: 2000,
  iterations: Infinity,
  easing: 'ease-out',
}

var options = {
  duration: 2000,
  iterations: Infinity,
}

h1s[0].animate(frames, options)
h1s[1].animate(frames2, options2)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/web-animations.min.js