JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

<h2>
Animated
</h2>
<div class="outer">
  <div class="inner wiggle"></div>
</div>
<h2>
Not animated
</h2>
<div class="outer">
  <div class="inner"></div>
</div>
<hr>
<button id="toggle">
move right
</button>

SCSS

@keyframes wiggle {
  from {
    left: 10%;
  }
  50% {
    left: 30%;
  }
  to {
    left: 10%;
  }
}

.outer {
  height: 5em;
  background-color: black;
  position: relative;
}

.inner {
  height: 100%;
  width: 10%;
  position: absolute;
  transform: translate(0%);
  background-color: green;
  transition: transform 2s ease-in-out;
  &.wiggle {
    animation: wiggle 2s infinite;
  }
  &.right {
    transform: translate(900%);
    
  }
}

JavaScript

$('#toggle').click(() => {
  $('.inner').removeClass('wiggle').addClass('right');
});