jQuery addClass example

Change class name on click in jQuery

HTML

<div class="item">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate aliquid incidunt asperiores dignissimos possimus consequatur, impedit eos, distinctio esse. Non excepturi praesentium quae iusto id, vel officiis temporibus odio ab!
</div>

SCSS

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: '';
    background: blue;
    display: block;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    border-radius: 40%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 2s linear;
    z-index: -1;
  }
  
  &::after {
    transition: 1.9s linear;
  }
 
  &:hover {
    &::before,
    &::after {
      transform: translate(-50%, 0) rotate(360deg);
      top: 100%;
    }
  }
}