SCSS

by Richard Hunter

HTML

<div id="circle">circle</div>
<div id="q">text</div>

<button id="interaktiv">interaktiv</button>

JavaScript

'use strict';

document.addEventListener('DOMContentLoaded', function() {
  var boxfünf = [{
      transform: 'translate(0, 0)',
    },
    {
      transform: 'translate(300px, 0px)',
    }
  ];

  var circle = document.getElementById('circle');
  var text = document.getElementById("q");

  document.querySelector('#interaktiv')
    .addEventListener('click', function() {
      circle.animate(boxfünf, {
        iterations: 1,
        fill: 'forwards',
        duration: 3000,
      });
    });
});