Skip to content

Instantly share code, notes, and snippets.

Created March 9, 2017 00:17
Show Gist options
  • Save anonymous/9308a20a3adc4121a2b3ce1da2483dda to your computer and use it in GitHub Desktop.
Save anonymous/9308a20a3adc4121a2b3ce1da2483dda to your computer and use it in GitHub Desktop.
Turn waves on/off without javascript
<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>
.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

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

JUST FOR MAKING SNIPPET Preitiest

A Pen by Szymon Pajka on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment