h1 Can installing software become nicer?
label.vertically-centered.install-cards for="activator" title="Click to activate installation process"
  input id="activator" type="checkbox"
  .card.top
    p.card__title Click to install
    .ticker
    .ticker
    .ticker
    .ticker
  .card.bottom
    .success-face 
      ' :]
  h2 I believe it can.
  h5 
   a href="https://twitter.com/lichine" @lichine

html { box-sizing: border-box; position: relative; }
*,*:before,*:after { position: relative; box-sizing: inherit; }
html,body { height: 100%; }
body { background-color: #663399; font-family: "Open Sans";}

h1,
h2,
h5 {
   color: rgba(255,255,255,0.25);
   text-align: center;
}
h1 { 
  position: absolute;
  font-size: 28px;
  left: 0;
  right: 0;
  top: 25%;
  transform: translateY(-25%);
}

h2 {  
  top: 145px;
}

h5 { top: 200px; opacity: .5; }

// Install Cards
.install-cards {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  
  
   .card__title {
      position: absolute;
      bottom: 0;
     left: 0;
     right: 0;
      font-weight: 700;
      color: #bababa; 
      text-align: center;
     
    }
  
  #activator {
    display: none;
    &:checked { 
      $rotate : 25deg;
      & ~ .card { 
        
        transform: rotateY($rotate) translateX(-245px) rotateZ(-5deg);
   
      }
      
      & ~ .card.top {
        box-shadow: 0 4px 0 0 rgba(0,0,0,.15); 
        
  
        
        .ticker {
          position: absolute;
          display: block;
          height: 10px;
          width: 10px;
          background-color: white;
          animation: transfer 0.5s cubic-bezier(0.5, 0, 1, 0.5) 20 alternate;
          top: 50%;
          left: 50%;
          opacity: 0;
          
          &:nth-child(1) { top: 40%; animation-delay: .28s; }
          &:nth-child(2) { top: 50%; animation-delay: .56s; }
          &:nth-child(3) { top: 60%; animation-delay: .82s; }
          &:nth-child(4) { top: 70%; animation-delay: 1.10s; }
          
        }
      }
      
      & ~ .card.bottom {
        background-color: #2b2b2b;
        box-shadow: inset 0 -45px 0 10px darken(#2b2b2b, 2%),
                    inset 0 10px 0 0px darken(#2b2b2b, 2%);  
        transform: rotateY($rotate) translateX(245px) rotateZ(5deg);
        animation: install 10s cubic-bezier(0.5, 0, 1, 0.5) forwards;
        
        .success-face {
          animation: success .28s 9.5s cubic-bezier(0.5, 0, 1, 0.5) forwards;          
        }
      }
    }
  } 
  
  .card {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background-color: ghostwhite;
    transition: background-color .28s ease,
                transform .28s ease,
                top .28s ease;
    &:hover {
      cursor: pointer;
      background-color: darken(ghostwhite, 2%);
    }
    
    &.top { z-index: 100; 
      &:before {
          content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/dropbox_logo.png);
          position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin: 0 auto;
        display: block;
        text-align: center;
        transform: translateY(-50%);
        
        }    
    }
    &.bottom {
      z-index: 1;
      box-shadow: 0 4px 0 0 rgba(0,0,0,.15);
      
      .success-face {
        color: ghostwhite;
        font-size: 45px;
        font-weight: 700;
        display: block;
        line-height: 0; 
        opacity: 0;
        top: 95%;
        transform: rotate(90deg) translateY(-95%);

      }
      
    }
  } /// card
  
}

// Animations
@keyframes transfer {
  0% { transform: translateX(0px); box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
  50% { opacity: 1; } 
  100% { transform: translateX(500px); opacity: .1; }
}

@keyframes install {
  $lightenAmount : 8%;
  0% { 
    box-shadow: inset 0 0px 0 10px darken(#2b2b2b, 2%),
                inset 0 0 0 0px lighten(#2b2b2b, $lightenAmount); 
  }
  
  100% {  
    box-shadow: inset 0 0 0 10px darken(#2b2b2b, 2%),
                inset 0 -300px 0 0px lighten(#2b2b2b, $lightenAmount);   
  }

}

@keyframes success {
  from { opacity: 0; }
  to { opacity: 1; }
}

// Helpers
.vertically-centered {
  top: 50%;
  transform: translateY(-50%);
}