animation speeds

see here how ease works

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h3> Css transition types </h3>
<p> Use the button below to start animating the bullets. Note that each transition takes 3 seconds to finish even though the animation speed/acceleration effect is different. Take a look!

</p>
<button class="animation-activator animated">
  Start animation
</button>
<ul class="bullets-container">
  <li>
    <span class="label">Linear</span>
    <span class="bullet linear-speed"></span>
  </li>
  <li>
    <span class="label">Ease</span>
    <span class="bullet ease-speed"></span>
  </li>
  <li>
    <span class="label">Ease In</span>
    <span class="bullet ease-in-speed"></span>
  </li>
  <li>
    <span class="label">Ease Out</span>
    <span class="bullet ease-out-speed"></span>
  </li>
  <li>
    <span class="label">Ease In Out</span>
    <span class="bullet ease-in-out-speed"></span>
  </li>
  <li>
    <span class="label">Cubic Bezier</span>
    <span class="bullet bezier-speed"></span>
  </li>
</ul>

SCSS

* {
  margin: 0;
  padding: 0;
}

$bg:#013220;
.animation-activator {
  margin: 10px 20px 10px 20px;
  padding: 15px 25px;
  color: #fff;
  background: $bg;
  border: none;
  transition: all 0.5s;
  cursor: pointer;
  outline: none;
  &:hover {
    background: lighten($bg, 10%);
    border-radius: 50px;
  }
}

.bullets-container {
  padding: 20px;
  max-width:450px;
  li {
    list-style-type: none;
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
    margin-top: -1px;
    height: 50px;
    box-sizing:border-box;
    .label {
      line-height: 50px;
      font-family: sans-serif;
      display:inline-block;
      border-right:1px solid #ccc;
      width:100px;
      padding-left:10px;
      color:#fff;
    }
    .bullet {
      display: block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 1px solid #666;
      left: 120px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &.animated {
    .bullet {
      left: 400px;
    }
  }
}
li:nth-child(even) {background:rgba(255,255,255,0.3);}


.linear-speed {
  transition:all 3s linear;
  background: lighten($bg, 5%);
}
.ease-speed {
  transition:all 3s ease;
  background: lighten($bg, 10%);
}
.ease-in-speed {
  transition:all 3s ease-in;
  background: lighten($bg, 15%);
}
.ease-out-speed {
  transition:all 3s ease-out;
  background: lighten($bg, 20%);
}
.ease-in-out-speed {
  transition:all 3s ease-in-out;
  background: lighten($bg, 25%);
}
.bezier-speed {
  transition:all 3s cubic-bezier(1, -0.93, 0, 1.49);
  background: lighten($bg, 30%);
}

li:nth-child(1) .label{ background: lighten($bg, 5%);}
li:nth-child(2) .label{ background: lighten($bg, 10%);}
li:nth-child(3) .label{ background: lighten($bg, 15%);}
li:nth-child(4) .label{ background: lighten($bg, 20%);}
li:nth-child(5) .label{ background: lighten($bg, 25%);}
li:nth-child(6) .label{ background: lighten($bg, 30%);}


h3 {
 ...

JavaScript

$('.animation-activator').on('click', function() {
  $(this).addClass('rubberBand');
  $('.bullets-container').toggleClass('animated');

  setTimeout(function() {
    $('.animation-activator').removeClass('rubberBand');
  }, 1500);
});