/*
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;
}