/*  A library of transitions for revealing the loaded images (Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/  */  .effect-parent {     -webkit-perspective: 1300px;     -moz-perspective: 1300px;     perspective: 1300px;     }   /* EFFECT 1 */ .effect-1 {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d;     -webkit-transform-origin: 50% 50% -300px;     -moz-transform-origin: 50% 50% -300px;     transform-origin: 50% 50% -300px;     -webkit-transform: rotateX(-180deg);     -moz-transform: rotateX(-180deg);     transform: rotateX(-180deg);     -webkit-animation: fly ease-in-out forwards;     -moz-animation: fly ease-in-out forwards;     animation: fly ease-in-out forwards; } @-webkit-keyframes fly {     100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; } }  @-moz-keyframes fly {     100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; } }  @keyframes fly {     100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; } }    /* EFFECT 2 */ .effect-2 {     -webkit-transform: translateY(200px);     -moz-transform: translateY(200px);     transform: translateY(200px);     -webkit-animation: moveUp ease forwards;     -moz-animation: moveUp ease forwards;     animation: moveUp ease forwards; }  @-webkit-keyframes moveUp {     to { -webkit-transform: translateY(0); opacity: 1; } }  @-moz-keyframes moveUp {     to { -moz-transform: translateY(0); opacity: 1; } }  @keyframes moveUp {     to { transform: translateY(0); opacity: 1; } }   /* EFFECT 3 */ .effect-3 {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d;     -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);     -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);     transform: translateZ(400px) translateY(300px) rotateX(-90deg);     -webkit-animation: fallPerspective ease-in-out forwards;     -moz-animation: fallPerspective ease-in-out forwards;     animation: fallPerspective ease-in-out forwards; }  @-webkit-keyframes fallPerspective {     100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } }  @-moz-keyframes fallPerspective {     100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } }  @keyframes fallPerspective {     100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } }   /* EFFECT 4 */ .effect-4 {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d;     -webkit-transform-origin: 0% 0%;     -moz-transform-origin: 0% 0%;     transform-origin: 0% 0%;     -webkit-transform: rotateX(-80deg);     -moz-transform: rotateX(-80deg);     transform: rotateX(-80deg);     -webkit-animation: flip ease-in-out forwards;     -moz-animation: flip ease-in-out forwards;     animation: flip ease-in-out forwards; }  @-webkit-keyframes flip {     100% { -webkit-transform: rotateX(0deg); opacity: 1; } }  @-moz-keyframes flip {     100% { -moz-transform: rotateX(0deg); opacity: 1; } }  @keyframes flip {     100% { transform: rotateX(0deg); opacity: 1; } }   /* EFFECT 5 */ .effect-5 {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d;     -webkit-transform: rotateY(-180deg);     -moz-transform: rotateY(-180deg);     transform: rotateY(-180deg);     -webkit-animation: moveUp ease-in-out forwards;     -moz-animation: moveUp ease-in-out forwards;     animation: moveUp ease-in-out forwards; }   /* EFFECT 6 */ .effect-6 {      -webkit-transform:  scale(0.638) translate(-179px);     -moz-transform:     scale(0.638) translate(-179px);     transform:          scale(0.638) translate(-179px);      -webkit-animation: moveUp ease-in-out forwards;     -moz-animation: moveUp ease-in-out forwards;     animation: moveUp ease-in-out forwards; }      /* Universal durations */ .effect-duration-1{     -webkit-animation-duration: .4s;     -moz-animation-duration:    .4s;     animation-duration:         .4s; } .effect-duration-2{     -webkit-animation-duration: .5s;     -moz-animation-duration:    .5s;     animation-duration:         .5s; } .effect-duration-3{     -webkit-animation-duration: .6s;     -moz-animation-duration:    .6s;     animation-duration:         .6s; } .effect-duration-4{     -webkit-animation-duration: .7s;     -moz-animation-duration:    .7s;     animation-duration:         .7s; } .effect-duration-5{     -webkit-animation-duration: .8s;     -moz-animation-duration:    .8s;     animation-duration:         .8s; } .effect-duration-6{     -webkit-animation-duration: .9s;     -moz-animation-duration:    .9s;     animation-duration:         .9s; } .effect-duration-7{     -webkit-animation-duration: .95s;     -moz-animation-duration:    .95s;     animation-duration:         .95s; } .effect-duration-8{     -webkit-animation-duration: 1s;     -moz-animation-duration:    1s;     animation-duration:         1s; } .effect-duration-9{     -webkit-animation-duration: 1.05s;     -moz-animation-duration:    1.05s;     animation-duration:         1.05s; } .effect-duration-10{     -webkit-animation-duration: 1.1s;     -moz-animation-duration:    1.1s;     animation-duration:         1.1s; }