%div.clock.clock-count
    - for n in 59.downto(0) do
        %div{:class => "up up-#{n} gradient-white-gray"} #{n}
        %div{:class => "down down-#{n}"} #{n}
        
%div.clock.clock-reverse      
    - (0..59).each do |i|
        %div{:class => "up up-#{i} gradient-white-gray"} #{i}
        %div{:class => "down down-#{i}"} #{i}

%div.clock.clock-fade      
    - (0..59).each do |i|
        %div{:class => "tick tick-#{i}"} #{i}

%h1 Flat CSS-only countdown and countup     
        

@import "compass/css3";

*{
  box-sizing: border-box;
}
.gradient-white-gray{

  background: linear-gradient(to bottom, #000000 0%,#111 100%); /* W3C */
}

body{
  background: #e74c3c;
}
h1{
  padding: 20px 50px;
  color: #c0392b;
  font-size: 48px;
  background: black;
}
$clockCountWidth: 500px;
$clockCountHeight: 250px;
$clockCountPadding: 20px;
$clockCountTotal: 59;

$clockReverseWidth: 200px;
$clockReverseHeight: 100px;
$clockReversePadding: 10px;
$clockReverseTotal: 59;

$clockFadeWidth: 100px;
$clockFadeHeight: 50px;
$clockFadePadding: 5px;
$clockFadeTotal: 59;

.clock{
   display: inline-block;
   vertical-align: top;
   color: #E74C3C;
   margin: 40px 50px;
   box-shadow: 4px 4px 0 4px #FFF, 8px 8px 0 8px #c0392b;
   .up, .down{
    left: 0; right: 0;
    text-align: center;
    overflow: hidden;
    position: absolute;
    backface-visibility: hidden;
    animation-fill-mode: forwards;  
  } 
  .up{
    top: 0; bottom: 50%;
    transform-origin: 50% 100%;
  }   
  .down{
    top: 50%; bottom: 0;    
    background: black;
    transform-origin: 50% 0%;
    line-height: 0px;
  }
 
}

.clock-fade{
   width: $clockFadeWidth;
   height: $clockFadeHeight;
   background: black;
   position: relative;
   padding: $clockFadePadding;
   .tick{
     position: absolute;
     top: 0; bottom: 0; left: 0; right: 0;
     font-size: $clockFadeHeight;
     text-align: center;
     line-height: $clockFadeHeight - $clockFadePadding / 2;
     background: black;
   }
   $i : $clockReverseTotal;
   @while $i >= 0{
    .tick-#{$i} {
      animation: fade 2s 1;
      animation-delay: #{$clockReverseTotal - $i - 1}s;
      animation-fill-mode: forwards;   
    }
    $i : $i - 1;
  }
   
}

.clock-reverse{
   width: $clockReverseWidth;
   height: $clockReverseHeight;
   background: black;
   position: relative;
   padding: $clockReversePadding;
   perspective: 1000px;
  .up, .down{
    font-size: $clockReverseHeight - $clockReversePadding; 
  }
  .up{
    line-height: $clockReverseHeight;
  }
  $i : $clockReverseTotal;
  @while $i > 0{ 
    .up-#{$i} {
      animation: flip-up 1s 1; 
      animation-delay: #{$clockReverseTotal - $i}s;
      animation-fill-mode: forwards;  
      z-index: $i;
    }
    $i : $i - 1;
  }
  
  $i : $clockReverseTotal;
  @while $i >= 0{
    .down-#{$i} {
      animation: flip-up-back 1s 1;
      transform: rotate3d(-1, 0, 0,180deg);
      animation-delay: #{$clockReverseTotal - $i - 1}s;
      animation-fill-mode: forwards;   
      z-index: $clockReverseTotal - $i; 
    }
    $i : $i - 1;
  }
  
}

.clock-count {
 width: $clockCountWidth;
 height: $clockCountHeight;
 background: black;
 position: relative;
 padding: $clockCountPadding;
 perspective: 1000px;
  .up, .down{
    font-size: $clockCountHeight - $clockCountPadding; 
  }
  .up{
    line-height: $clockCountHeight;
  }
  @for $i from 1 through $clockCountTotal{
    .up-#{$i} {
      transform: rotate3d(-1, 0, 0,180deg);
      animation: flip-up-back 1s 1;
      animation-delay: #{$i}s;
      animation-fill-mode: forwards;  
      z-index: $i;
    }
  }

   @for $i from 0 through $clockCountTotal - 1{
    .down-#{$i} {
      animation: flip-up 1s 1;
      animation-delay: #{$i+1}s;
      animation-fill-mode: forwards;  
      z-index: 100-$i;
    }
  }

}


 
@-webkit-keyframes flip-up /* Safari and Chrome */
{
  from {transform: rotate3d(0,0,0,0deg)}
  to {transform: rotate3d(1, 0, 0, 180deg)}
} 

@-webkit-keyframes flip-up-back /* Safari and Chrome */
{
  from {transform: rotate3d(-1, 0, 0,180deg); }
  to {transform: rotate3d(0,0,0,0deg);}
} 

@keyframes flip-up 
{
  from {transform: rotate3d(0,0,0,0deg)}
  to {transform: rotate3d(1, 0, 0, 180deg)}
} 

@keyframes flip-up-back
{
  from {transform: rotate3d(-1, 0, 0,180deg); }
  to {transform: rotate3d(0,0,0,0deg);}
} 


@-webkit-keyframes fade /* Safari and Chrome */
{
  0% {opacity: 0; -webkit-filter: blur(2px); }
  25% {opacity: 1; -webkit-filter: blur(0px);}
  75% {opacity: 1; -webkit-filter: blur(0px);}
  100% {opacity: 0; -webkit-filter: blur(2px);}
} 


@keyframes fade
{
  0% {opacity: 0; }
  25% {opacity: 1;}
  75% {opacity: 1;}
  100% {opacity: 0}
} 

/* Pure CSS */