Skip to content

Instantly share code, notes, and snippets.

@dragstarcrowant
Last active November 18, 2015 19:26
Show Gist options
  • Save dragstarcrowant/c1b875884a55c2e67969 to your computer and use it in GitHub Desktop.
Save dragstarcrowant/c1b875884a55c2e67969 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$listOfSizes:(
(25px, 2px),
(20px, 2px, small),
(30px, 3px, big)
);
$listOfAnimationTime:(
(1000ms, -525ms),
(467ms, -430ms),
(462ms, -628ms),
(700ms, -745ms),
(467ms, -189ms),
(600ms, -185ms)
);
h1{
@each $height, $width, $label in $listOfSizes{
@if($label){
&.#{$label}{
height: $height;
width: $width;
}
}@else {
height: $height;
$t: 0;
@for $i from 0 through 5{
font-size: $i;
&:nth-child(#{$i+1}){
font-size: nth(nth($listOfAnimationTime, $i+1), 1);
left: $t;
$t: $t + $i + $width + 1;
-webkit-animation: soundbarsPlay1#{$label} 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1#{$label} 1000ms -525ms linear infinite alternate
}
}
}
}
}
h1 {
height: 25px;
font-size: 0;
font-size: 1;
font-size: 2;
font-size: 3;
font-size: 4;
font-size: 5;
}
h1:nth-child(1) {
font-size: 1000ms;
left: 0;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1:nth-child(2) {
font-size: 467ms;
left: 3px;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1:nth-child(3) {
font-size: 462ms;
left: 7px;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1:nth-child(4) {
font-size: 700ms;
left: 12px;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1:nth-child(5) {
font-size: 467ms;
left: 18px;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1:nth-child(6) {
font-size: 600ms;
left: 25px;
-webkit-animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
animation: soundbarsPlay1 1000ms -525ms linear infinite alternate;
}
h1.small {
height: 20px;
width: 2px;
}
h1.big {
height: 30px;
width: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment