JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<p class="a">
test
</p>

<p class="b">
test
</p>

CSS

p.a {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

p.b {
  animation-duration: 3s;
  animation-name: slidein2;
  animation-iteration-count: infinite;
}


@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes slidein2 {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

CoffeeScript

document.body.addEventListener "animationstart", (event) ->
  console.log event
  event.target.style.webkitAnimationPlayState = 'paused';