Awesome Image Slice Flip Animation Using Pure CSS / CSS3

Category: Animation , CSS & CSS3 | December 18, 2015
0 Comment
Demo Download
Author: baileyparker
Views Total: 716 views
Official Page: Go to website
Last Update: December 18, 2015
License: MIT

Preview:

Awesome Image Slice Flip Animation Using Pure CSS / CSS3

Description:

A pure CSS approach to creating a cool slice flip transition effect between two images. Based on :before & :after selectors and several CSS3 animation properties.

How to use it:

Markup html structure.

<div class="tileable-image">
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
  <div class="tileable-image-tile"></div>
</div>

Add images to your webpage.

.tileable-image {
  width: 650px;
  height: 434px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.tileable-image-tile {
  float: left;
  position: relative;
}

.tileable-image-tile, .tileable-image-tile:before, .tileable-image-tile:after {
  width: 81.25px;
  height: 72.33333px;
}

.tileable-image-tile:before, .tileable-image-tile:after {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: ' ';
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

.tileable-image-tile:before { background: url("1.png") 0 0; }

.tileable-image-tile:after {
  background: url("2.jpg") 0 0 ;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

The primary CSS / CSS3 rules for the slices.

.tileable-image-tile:nth-child(1):before, .tileable-image-tile:nth-child(1):after { background-position: 0px 0px; }

.tileable-image-tile:nth-child(1):before {
  -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.5s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(1):after {
  -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.5s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(2):before, .tileable-image-tile:nth-child(2):after { background-position: -81.25px 0px; }

.tileable-image-tile:nth-child(2):before {
  -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(2):after {
  -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(3):before, .tileable-image-tile:nth-child(3):after { background-position: -162.5px 0px; }

.tileable-image-tile:nth-child(3):before {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(3):after {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(4):before, .tileable-image-tile:nth-child(4):after { background-position: -243.75px 0px; }

.tileable-image-tile:nth-child(4):before {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(4):after {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(5):before, .tileable-image-tile:nth-child(5):after { background-position: -325px 0px; }

.tileable-image-tile:nth-child(5):before {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(5):after {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(6):before, .tileable-image-tile:nth-child(6):after { background-position: -406.25px 0px; }

.tileable-image-tile:nth-child(6):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(6):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(7):before, .tileable-image-tile:nth-child(7):after { background-position: -487.5px 0px; }

.tileable-image-tile:nth-child(7):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(7):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(8):before, .tileable-image-tile:nth-child(8):after { background-position: -568.75px 0px; }

.tileable-image-tile:nth-child(8):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(8):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(9):before, .tileable-image-tile:nth-child(9):after { background-position: 0px -72.33333px; }

.tileable-image-tile:nth-child(9):before {
  -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.6s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(9):after {
  -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.6s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(10):before, .tileable-image-tile:nth-child(10):after { background-position: -81.25px -72.33333px; }

.tileable-image-tile:nth-child(10):before {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(10):after {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(11):before, .tileable-image-tile:nth-child(11):after { background-position: -162.5px -72.33333px; }

.tileable-image-tile:nth-child(11):before {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(11):after {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(12):before, .tileable-image-tile:nth-child(12):after { background-position: -243.75px -72.33333px; }

.tileable-image-tile:nth-child(12):before {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(12):after {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(13):before, .tileable-image-tile:nth-child(13):after { background-position: -325px -72.33333px; }

.tileable-image-tile:nth-child(13):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(13):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(14):before, .tileable-image-tile:nth-child(14):after { background-position: -406.25px -72.33333px; }

.tileable-image-tile:nth-child(14):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(14):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(15):before, .tileable-image-tile:nth-child(15):after { background-position: -487.5px -72.33333px; }

.tileable-image-tile:nth-child(15):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(15):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(16):before, .tileable-image-tile:nth-child(16):after { background-position: -568.75px -72.33333px; }

.tileable-image-tile:nth-child(16):before {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(16):after {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(17):before, .tileable-image-tile:nth-child(17):after { background-position: 0px -144.66667px; }

.tileable-image-tile:nth-child(17):before {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(17):after {
  -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.7s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(18):before, .tileable-image-tile:nth-child(18):after { background-position: -81.25px -144.66667px; }

.tileable-image-tile:nth-child(18):before {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(18):after {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(19):before, .tileable-image-tile:nth-child(19):after { background-position: -162.5px -144.66667px; }

.tileable-image-tile:nth-child(19):before {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(19):after {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(20):before, .tileable-image-tile:nth-child(20):after { background-position: -243.75px -144.66667px; }

.tileable-image-tile:nth-child(20):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(20):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(21):before, .tileable-image-tile:nth-child(21):after { background-position: -325px -144.66667px; }

.tileable-image-tile:nth-child(21):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(21):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(22):before, .tileable-image-tile:nth-child(22):after { background-position: -406.25px -144.66667px; }

.tileable-image-tile:nth-child(22):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(22):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(23):before, .tileable-image-tile:nth-child(23):after { background-position: -487.5px -144.66667px; }

.tileable-image-tile:nth-child(23):before {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(23):after {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(24):before, .tileable-image-tile:nth-child(24):after { background-position: -568.75px -144.66667px; }

.tileable-image-tile:nth-child(24):before {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(24):after {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(25):before, .tileable-image-tile:nth-child(25):after { background-position: 0px -217px; }

.tileable-image-tile:nth-child(25):before {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(25):after {
  -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.8s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(26):before, .tileable-image-tile:nth-child(26):after { background-position: -81.25px -217px; }

.tileable-image-tile:nth-child(26):before {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(26):after {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(27):before, .tileable-image-tile:nth-child(27):after { background-position: -162.5px -217px; }

.tileable-image-tile:nth-child(27):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(27):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(28):before, .tileable-image-tile:nth-child(28):after { background-position: -243.75px -217px; }

.tileable-image-tile:nth-child(28):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(28):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(29):before, .tileable-image-tile:nth-child(29):after { background-position: -325px -217px; }

.tileable-image-tile:nth-child(29):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(29):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(30):before, .tileable-image-tile:nth-child(30):after { background-position: -406.25px -217px; }

.tileable-image-tile:nth-child(30):before {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(30):after {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(31):before, .tileable-image-tile:nth-child(31):after { background-position: -487.5px -217px; }

.tileable-image-tile:nth-child(31):before {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(31):after {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(32):before, .tileable-image-tile:nth-child(32):after { background-position: -568.75px -217px; }

.tileable-image-tile:nth-child(32):before {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(32):after {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(33):before, .tileable-image-tile:nth-child(33):after { background-position: 0px -289.33333px; }

.tileable-image-tile:nth-child(33):before {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(33):after {
  -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
  animation: 0.5s linear 0.9s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(34):before, .tileable-image-tile:nth-child(34):after { background-position: -81.25px -289.33333px; }

.tileable-image-tile:nth-child(34):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(34):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(35):before, .tileable-image-tile:nth-child(35):after { background-position: -162.5px -289.33333px; }

.tileable-image-tile:nth-child(35):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(35):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(36):before, .tileable-image-tile:nth-child(36):after { background-position: -243.75px -289.33333px; }

.tileable-image-tile:nth-child(36):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(36):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(37):before, .tileable-image-tile:nth-child(37):after { background-position: -325px -289.33333px; }

.tileable-image-tile:nth-child(37):before {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(37):after {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(38):before, .tileable-image-tile:nth-child(38):after { background-position: -406.25px -289.33333px; }

.tileable-image-tile:nth-child(38):before {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(38):after {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(39):before, .tileable-image-tile:nth-child(39):after { background-position: -487.5px -289.33333px; }

.tileable-image-tile:nth-child(39):before {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(39):after {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(40):before, .tileable-image-tile:nth-child(40):after { background-position: -568.75px -289.33333px; }

.tileable-image-tile:nth-child(40):before {
  -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(40):after {
  -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(41):before, .tileable-image-tile:nth-child(41):after { background-position: 0px -361.66667px; }

.tileable-image-tile:nth-child(41):before {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(41):after {
  -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(42):before, .tileable-image-tile:nth-child(42):after { background-position: -81.25px -361.66667px; }

.tileable-image-tile:nth-child(42):before {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(42):after {
  -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.1s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(43):before, .tileable-image-tile:nth-child(43):after { background-position: -162.5px -361.66667px; }

.tileable-image-tile:nth-child(43):before {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(43):after {
  -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.2s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(44):before, .tileable-image-tile:nth-child(44):after { background-position: -243.75px -361.66667px; }

.tileable-image-tile:nth-child(44):before {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(44):after {
  -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.3s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(45):before, .tileable-image-tile:nth-child(45):after { background-position: -325px -361.66667px; }

.tileable-image-tile:nth-child(45):before {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(45):after {
  -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.4s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(46):before, .tileable-image-tile:nth-child(46):after { background-position: -406.25px -361.66667px; }

.tileable-image-tile:nth-child(46):before {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(46):after {
  -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.5s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(47):before, .tileable-image-tile:nth-child(47):after { background-position: -487.5px -361.66667px; }

.tileable-image-tile:nth-child(47):before {
  -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.6s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(47):after {
  -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.6s 1 alternate forwards flip-back;
}

.tileable-image-tile:nth-child(48):before, .tileable-image-tile:nth-child(48):after { background-position: -568.75px -361.66667px; }

.tileable-image-tile:nth-child(48):before {
  -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-front;
  animation: 0.5s linear 1.7s 1 alternate forwards flip-front;
}

.tileable-image-tile:nth-child(48):after {
  -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-back;
  animation: 0.5s linear 1.7s 1 alternate forwards flip-back;
}

Create the flip animation using CSS3.

@-webkit-keyframes 
flip-front {  from {
 -webkit-transform: rotateY(0deg);
 transform: rotateY(0deg);
}

to {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

@keyframes 
flip-front {  from {
 -webkit-transform: rotateY(0deg);
 transform: rotateY(0deg);
}

to {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

@-webkit-keyframes 
flip-back {  from {
 -webkit-transform: rotateY(180deg);
 transform: rotateY(180deg);
}

to {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
}

@keyframes 
flip-back {  from {
 -webkit-transform: rotateY(180deg);
 transform: rotateY(180deg);
}

to {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
}

See Also:

You Might Be Interested In:

Leave a Reply