webkit flip animation

/* CSS */

$height: 85px;
$width:  700px;

.container { position: relative }
.card {
  height: $height;
  width:  $width;
  z-index: 1;
}
.card_back {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  z-index: 0;
  height: 0;
}
.container.flipped {
  -webkit-perspective: 1000;
  .card, .card_back {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
   }
  .card_back {
    -webkit-animation-name: flip_back;
    visibility: visible;
    z-index: 1;
    height: $height;
  }
  .card {
    -webkit-animation-name: flip_front;
    z-index: 0;
  }
}

@-webkit-keyframes flip_front { 
  0% { -webkit-transform: rotateX(0deg); }
  50% { -webkit-transform: rotateX(90deg); } 
  100% { -webkit-transform: rotateX(90deg); }
}

@-webkit-keyframes flip_back { 
  0% {  -webkit-transform: rotateX(90deg); }
  50% { -webkit-transform: rotateX(90deg); } 
  100% { -webkit-transform: rotateX(0deg); }
}

/* HTML */

<div class="container">
  <div class="card"></div>
  <div class="card_back"></div>
</div>