Turn waves on/off without javascript

index.html

<div class="music">
  <label for="play"></label>
  <input id="play" type="checkbox" />
  <div class="waves">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
  </div>  
</div>
<aside>By Szymon Pajka · 2017</aside>

style.less

.music{
  position: absolute;
  display: flex;
  width: 40px;
  height: 40px;
}

#play{
  display: none;
}

#play:checked{
  & + .waves > .wave {
    animation-duration: 0s;
    height: 4px;
  }
}

label{
  position: absolute;
  width: 40px;
  height: 40px;
}

.waves {
  display: flex;
  width: 40px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-around;
  
  > .wave{
    display: inline-block;
    width: 5px;
    height: 4px;
    background: #E91E63;
    -webkit-animation-name: wave;
    animation-name: wave;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
      
      &:nth-child(1){
        animation-duration: 1029ms;
      }
    
      &:nth-child(2){
        animation-duration: 1201ms;
      }
    
      &:nth-child(3){
        animation-duration: 1103ms;
      }
    
      &:nth-child(4){
        animation-duration: 1062ms;
      }
    
      &:nth-child(5){
        animation-duration: 1209ms;
      }
  }
}

@-webkit-keyframes wave {
    0%,100%,50% {
        height: 40px
    }

    25%,75% {
        height: 4px
    }
}

@keyframes wave {
     0%,100%,50% {
        height: 40px
    }

    25%,75% {
        height: 4px
    }
}

/* JUST FOR MAKING SNIPPET PRETTIEST */
  
body{
  background-color: #eee;
}

.music{
  background-color: #fff;
  padding: 10px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%); 
  border-radius: 4px;
}

aside{
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #ccc;
  text-align: center;
}

* {
  user-select: none;
}

/* -------------------------------- */

turn-waves-on-off-without-javascript.markdown

Turn waves on/off without javascript

On this example, you can see how to create a toggleable waves animation without javascript.

The Extra benefit is that you know a state of animation (on/off) thanks for using checkbox

A Pen by Szymon Pajka on CodePen.

License.