@media only screen and (min-width: 40.063em) {
.products-grid li {
opacity: 0;
} .products-grid li.shown {
opacity: 1;
} .products-grid.effect-e0 li.animate:not(.shown) {
opacity: 1;
} .csstransforms3d .products-grid.effect-e1 li.animate:not(.shown) {
-webkit-animation: fadeIn 1.5s ease forwards;
-moz-animation: fadeIn 1.5s ease forwards;
animation: fadeIn 1.5s ease forwards;
}
@-webkit-keyframes fadeIn {
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
to { opacity: 1; }
}
@keyframes fadeIn {
to { opacity: 1; }
} .csstransforms3d .products-grid.effect-e2 li.animate:not(.shown) {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp .5s ease forwards;
-moz-animation: moveUp .5s ease forwards;
animation: moveUp .5s 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; }
} .csstransforms3d .products-grid.effect-e3 li.animate:not(.shown) {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
-webkit-animation: scaleUp .5s ease-in-out forwards;
-moz-animation: scaleUp .5s ease-in-out forwards;
animation: scaleUp .5s ease-in-out forwards;
}
@-webkit-keyframes scaleUp {
to { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes scaleUp {
to { -moz-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
to { transform: scale(1); opacity: 1; }
} .csstransforms3d .products-grid.effect-e4 {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.csstransforms3d .products-grid.effect-e4 li.animate:not(.shown) {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(500px) translateY(300px) rotateX(-90deg);
-moz-transform: translateZ(500px) translateY(300px) rotateX(-90deg);
transform: translateZ(500px) translateY(300px) rotateX(-90deg);
-webkit-animation: fallPerspective .7s ease-in-out forwards;
-moz-animation: fallPerspective .7s ease-in-out forwards;
animation: fallPerspective .7s 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; }
} .csstransforms3d .products-grid.effect-e5 {
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
perspective: 1500px;
}
.csstransforms3d .products-grid.effect-e5 li.animate:not(.shown) {
-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 1s ease-in-out forwards;
-moz-animation: fly 1s ease-in-out forwards;
animation: fly 1s ease-in-out forwards;
}
@-webkit-keyframes fly {
100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@-moz-keyframes fly {
100% { -moz-transform: rotateX(0deg); opacity: 1; }
}
@keyframes fly {
100% { transform: rotateX(0deg); opacity: 1; }
} .csstransforms3d .products-grid.effect-e6 {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.csstransforms3d .products-grid.effect-e6 li.animate:not(.shown) {
-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 .8s ease-in-out forwards;
-moz-animation: flip .8s ease-in-out forwards;
animation: flip .8s 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; }
} .csstransforms3d .products-grid.effect-e7 {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.csstransforms3d .products-grid.effect-e7 li.animate:not(.shown) {
-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: helix .8s ease-in-out forwards;
-moz-animation: helix .8s ease-in-out forwards;
animation: helix .8s ease-in-out forwards;
}
@-webkit-keyframes helix {
100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}
@-moz-keyframes helix {
100% { -moz-transform: rotateY(0deg); opacity: 1; }
}
@keyframes helix {
100% { transform: rotateY(0deg); opacity: 1; }
} .csstransforms3d .products-grid.effect-e8 {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
.csstransforms3d .products-grid.effect-e8 li.animate:not(.shown) {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
-webkit-animation: popUp .8s ease-in forwards;
-moz-animation: popUp .8s ease-in forwards;
animation: popUp .8s ease-in forwards;
}
@-webkit-keyframes popUp {
60% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes popUp {
60% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@keyframes popUp {
60% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
100% { transform: scale(1); opacity: 1; }
}
}