<section>
  <h2>Lolipop Awesome Speed</h2>
  <ul id="target">
    <li>Light</li>
    <li>Standard</li>
    <li>HighSpeed</li>
    <li>Xserver</li>
  </ul>
  <div>
    <a onclick="startAnime('normal')">x1</a>
    <a onclick="startAnime('tenTimes')">x10</a>
    <a onclick="startAnime('hundredTimes')">x100</a>
    <a onclick="remove()">RESET</a>
  </div>
</section>
*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic',sans-serif
  color: #333
  background: #efefef
  section
    background: #fff
    border-radius: 3px
    width: 95%
    min-width: 320px
    max-width: 600px
    margin: 20px auto
    padding: 20px
    border-top: 3px solid lightseagreen
    h2
      text-align: center
    ul
      li
        font-weight: bold
        text-align: right
        margin: 20px 0
        width: 0
        overflow: hidden
        &:nth-of-type(1)
          background: linear-gradient(45deg,salmon,tomato)
        &:nth-of-type(2)
          background: linear-gradient(45deg,lightgreen,lightseagreen)
        &:nth-of-type(3)
          background: linear-gradient(45deg,skyblue,lightskyblue)
        &:nth-of-type(4)
          background: linear-gradient(45deg,yellow,gold)
      &.normal
        li
          &:nth-of-type(1)
            animation: wide 863ms forwards
          &:nth-of-type(2)
            animation: wide 450ms forwards
          &:nth-of-type(3)
            animation: wide 112ms forwards
          &:nth-of-type(4)
            animation: wide 253ms forwards
      &.tenTimes
        li
          &:nth-of-type(1)
            animation: wide 8630ms forwards
          &:nth-of-type(2)
            animation: wide 4500ms forwards
          &:nth-of-type(3)
            animation: wide 1120ms forwards
          &:nth-of-type(4)
            animation: wide 2530ms forwards
      &.hundredTimes
        li
          &:nth-of-type(1)
            animation: wide 86300ms forwards
          &:nth-of-type(2)
            animation: wide 45000ms forwards
          &:nth-of-type(3)
            animation: wide 11200ms forwards
          &:nth-of-type(4)
            animation: wide 25300ms forwards
        
    div
      display: flex
      margin: 10px
      justify-content: space-evenly
      a
        width: 20%
        max-width: 90px
        padding: .5em 1em
        text-align: center
        text-decoration: none
        border-radius: 3px
        background: #efefef
        cursor: pointer
        transition: .3s ease-in-out
        box-shadow: 0 1px 2px rgba(0,0,0,.19)
        &:last-child
          background: tomato
          color: #fff
        &:hover
          transform: translateY(-2px)
          box-shadow: 0 3px 5px rgba(0,0,0,.14)
        
@keyframes wide
  99%
    color: #333
  100%
    width: 100%
    padding-right: 10px
    color: #fff
View Compiled
const target = document.querySelector("#target");

const startAnime = (speed) =>{
  remove();
  target.classList.add(speed);
}

function remove(){
  target.classList.remove("normal","tenTimes","hundredTimes");
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.