|
@ -1,5 +1,5 @@ |
|
|
/******************************* |
|
|
/******************************* |
|
|
Animations |
|
|
|
|
|
|
|
|
Static Animations |
|
|
*******************************/ |
|
|
*******************************/ |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
@ -103,246 +103,36 @@ |
|
|
0% { |
|
|
0% { |
|
|
transform: scale3d(1, 1, 1); |
|
|
transform: scale3d(1, 1, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
30% { |
|
|
30% { |
|
|
transform: scale3d(1.25, 0.75, 1); |
|
|
transform: scale3d(1.25, 0.75, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
40% { |
|
|
40% { |
|
|
transform: scale3d(0.75, 1.25, 1); |
|
|
transform: scale3d(0.75, 1.25, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
50% { |
|
|
50% { |
|
|
transform: scale3d(1.15, 0.85, 1); |
|
|
transform: scale3d(1.15, 0.85, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
65% { |
|
|
65% { |
|
|
transform: scale3d(.95, 1.05, 1); |
|
|
transform: scale3d(.95, 1.05, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
75% { |
|
|
75% { |
|
|
transform: scale3d(1.05, .95, 1); |
|
|
transform: scale3d(1.05, .95, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: scale3d(1, 1, 1); |
|
|
transform: scale3d(1, 1, 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Flips |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.flip.transition.in, |
|
|
|
|
|
.flip.transition.out { |
|
|
|
|
|
perspective: 2000px; |
|
|
|
|
|
} |
|
|
|
|
|
.horizontal.flip.transition.in { |
|
|
|
|
|
animation-name: horizontalFlipIn; |
|
|
|
|
|
} |
|
|
|
|
|
.horizontal.flip.transition.out { |
|
|
|
|
|
animation-name: horizontalFlipOut; |
|
|
|
|
|
} |
|
|
|
|
|
.vertical.flip.transition.in { |
|
|
|
|
|
animation-name: verticalFlipIn; |
|
|
|
|
|
} |
|
|
|
|
|
.vertical.flip.transition.out { |
|
|
|
|
|
animation-name: verticalFlipOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Horizontal */ |
|
|
|
|
|
@keyframes horizontalFlipIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateY(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateY(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
/* Horizontal */ |
|
|
|
|
|
@keyframes horizontalFlipOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateY(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateY(90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Vertical */ |
|
|
|
|
|
@keyframes verticalFlipIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateX(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateX(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes verticalFlipOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateX(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateX(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Scale |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.scale.transition.in { |
|
|
|
|
|
animation-name: scaleIn; |
|
|
|
|
|
} |
|
|
|
|
|
.scale.transition.out { |
|
|
|
|
|
animation-name: scaleOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Scale */ |
|
|
|
|
|
@keyframes scaleIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0.7); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes scaleOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0.7); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Drop |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.drop.transition { |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); |
|
|
|
|
|
} |
|
|
|
|
|
.drop.transition.in { |
|
|
|
|
|
animation-name: dropIn; |
|
|
|
|
|
} |
|
|
|
|
|
.drop.transition.out { |
|
|
|
|
|
animation-name: dropOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Scale */ |
|
|
|
|
|
@keyframes dropIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes dropOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Browse |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.browse.transition.in { |
|
|
|
|
|
animation-name: browseIn; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
|
|
|
} |
|
|
|
|
|
.browse.transition.out, |
|
|
|
|
|
.browse.transition.out.left { |
|
|
|
|
|
animation-name: browseOutLeft; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
|
|
|
} |
|
|
|
|
|
.browse.transition.out.right { |
|
|
|
|
|
animation-name: browseOutRight; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes browseIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: scale(0.8) translateZ(0px); |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
} |
|
|
|
|
|
10% { |
|
|
|
|
|
transform: scale(0.8) translateZ(0px); |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
opacity: 0.7; |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
transform: scale(1.05) translateZ(0px); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: scale(1) translateZ(0px); |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes browseOutLeft { |
|
|
|
|
|
0% { |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
50% { |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes browseOutRight { |
|
|
|
|
|
0% { |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
50% { |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/******************************* |
|
|
|
|
|
Transitions |
|
|
|
|
|
*******************************/ |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Bounce |
|
|
Bounce |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
.transition.bounce.in { |
|
|
.transition.bounce.in { |
|
|
animation-name: bounceIn; |
|
|
animation-name: bounceIn; |
|
|
animation-timing-function: ease; |
|
|
animation-timing-function: ease; |
|
@ -380,29 +170,23 @@ |
|
|
0%, 20%, 40%, 60%, 80%, 100% { |
|
|
0%, 20%, 40%, 60%, 80%, 100% { |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: scale3d(.3, .3, .3); |
|
|
transform: scale3d(.3, .3, .3); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
20% { |
|
|
20% { |
|
|
transform: scale3d(1.1, 1.1, 1.1); |
|
|
transform: scale3d(1.1, 1.1, 1.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
40% { |
|
|
40% { |
|
|
transform: scale3d(.9, .9, .9); |
|
|
transform: scale3d(.9, .9, .9); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
60% { |
|
|
60% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scale3d(1.03, 1.03, 1.03); |
|
|
transform: scale3d(1.03, 1.03, 1.03); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
80% { |
|
|
80% { |
|
|
transform: scale3d(.97, .97, .97); |
|
|
transform: scale3d(.97, .97, .97); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scale3d(1, 1, 1); |
|
|
transform: scale3d(1, 1, 1); |
|
@ -412,25 +196,20 @@ |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(0, 3000px, 0); |
|
|
transform: translate3d(0, 3000px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
60% { |
|
|
60% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(0, -20px, 0); |
|
|
transform: translate3d(0, -20px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
75% { |
|
|
75% { |
|
|
transform: translate3d(0, 10px, 0); |
|
|
transform: translate3d(0, 10px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
90% { |
|
|
90% { |
|
|
transform: translate3d(0, -5px, 0); |
|
|
transform: translate3d(0, -5px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: translate3d(0, 0, 0); |
|
|
transform: translate3d(0, 0, 0); |
|
|
} |
|
|
} |
|
@ -439,25 +218,20 @@ |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(0, -3000px, 0); |
|
|
transform: translate3d(0, -3000px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
60% { |
|
|
60% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(0, 25px, 0); |
|
|
transform: translate3d(0, 25px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
75% { |
|
|
75% { |
|
|
transform: translate3d(0, -10px, 0); |
|
|
transform: translate3d(0, -10px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
90% { |
|
|
90% { |
|
|
transform: translate3d(0, 5px, 0); |
|
|
transform: translate3d(0, 5px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: none; |
|
|
transform: none; |
|
|
} |
|
|
} |
|
@ -466,25 +240,20 @@ |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(3000px, 0, 0); |
|
|
transform: translate3d(3000px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
60% { |
|
|
60% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(-25px, 0, 0); |
|
|
transform: translate3d(-25px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
75% { |
|
|
75% { |
|
|
transform: translate3d(10px, 0, 0); |
|
|
transform: translate3d(10px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
90% { |
|
|
90% { |
|
|
transform: translate3d(-5px, 0, 0); |
|
|
transform: translate3d(-5px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: none; |
|
|
transform: none; |
|
|
} |
|
|
} |
|
@ -493,25 +262,20 @@ |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
0%, 60%, 75%, 90%, 100% { |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(-3000px, 0, 0); |
|
|
transform: translate3d(-3000px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
60% { |
|
|
60% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(25px, 0, 0); |
|
|
transform: translate3d(25px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
75% { |
|
|
75% { |
|
|
transform: translate3d(-10px, 0, 0); |
|
|
transform: translate3d(-10px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
90% { |
|
|
90% { |
|
|
transform: translate3d(5px, 0, 0); |
|
|
transform: translate3d(5px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: none; |
|
|
transform: none; |
|
|
} |
|
|
} |
|
@ -521,12 +285,10 @@ |
|
|
20% { |
|
|
20% { |
|
|
transform: scale3d(.9, .9, .9); |
|
|
transform: scale3d(.9, .9, .9); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
50%, 55% { |
|
|
50%, 55% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scale3d(1.1, 1.1, 1.1); |
|
|
transform: scale3d(1.1, 1.1, 1.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: scale3d(.3, .3, .3); |
|
|
transform: scale3d(.3, .3, .3); |
|
@ -536,12 +298,10 @@ |
|
|
20% { |
|
|
20% { |
|
|
transform: translate3d(0, -10px, 0); |
|
|
transform: translate3d(0, -10px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
40%, 45% { |
|
|
40%, 45% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(0, 20px, 0); |
|
|
transform: translate3d(0, 20px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(0, -2000px, 0); |
|
|
transform: translate3d(0, -2000px, 0); |
|
@ -551,12 +311,10 @@ |
|
|
20% { |
|
|
20% { |
|
|
transform: translate3d(0, 10px, 0); |
|
|
transform: translate3d(0, 10px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
40%, 45% { |
|
|
40%, 45% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(0, -20px, 0); |
|
|
transform: translate3d(0, -20px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(0, 2000px, 0); |
|
|
transform: translate3d(0, 2000px, 0); |
|
@ -567,7 +325,6 @@ |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(20px, 0, 0); |
|
|
transform: translate3d(20px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(-2000px, 0, 0); |
|
|
transform: translate3d(-2000px, 0, 0); |
|
@ -578,7 +335,6 @@ |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: translate3d(-20px, 0, 0); |
|
|
transform: translate3d(-20px, 0, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: translate3d(2000px, 0, 0); |
|
|
transform: translate3d(2000px, 0, 0); |
|
@ -586,85 +342,118 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Slide |
|
|
|
|
|
|
|
|
Browse |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
.transition.slide.in, |
|
|
|
|
|
.transition.slide.in.down { |
|
|
|
|
|
animation-name: slideInY; |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.up { |
|
|
|
|
|
animation-name: slideInY; |
|
|
|
|
|
transform-origin: bottom center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.left { |
|
|
|
|
|
animation-name: slideInX; |
|
|
|
|
|
transform-origin: center right; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.right { |
|
|
|
|
|
animation-name: slideInX; |
|
|
|
|
|
transform-origin: center left; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.out, |
|
|
|
|
|
.transition.slide.out.down { |
|
|
|
|
|
animation-name: slideOutY; |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.out.up { |
|
|
|
|
|
animation-name: slideOutY; |
|
|
|
|
|
transform-origin: bottom center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.browse.transition.in { |
|
|
|
|
|
animation-name: browseIn; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
} |
|
|
} |
|
|
.transition.slide.out.left { |
|
|
|
|
|
animation-name: slideOutX; |
|
|
|
|
|
transform-origin: center right; |
|
|
|
|
|
|
|
|
.browse.transition.out, |
|
|
|
|
|
.browse.transition.out.left { |
|
|
|
|
|
animation-name: browseOutLeft; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
} |
|
|
} |
|
|
.transition.slide.out.right { |
|
|
|
|
|
animation-name: slideOutX; |
|
|
|
|
|
transform-origin: center left; |
|
|
|
|
|
|
|
|
.browse.transition.out.right { |
|
|
|
|
|
animation-name: browseOutRight; |
|
|
|
|
|
animation-timing-function: ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideInY { |
|
|
|
|
|
|
|
|
@keyframes browseIn { |
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleY(0); |
|
|
|
|
|
|
|
|
transform: scale(0.8) translateZ(0px); |
|
|
|
|
|
z-index: -1; |
|
|
} |
|
|
} |
|
|
100% { |
|
|
|
|
|
|
|
|
10% { |
|
|
|
|
|
transform: scale(0.8) translateZ(0px); |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
opacity: 0.7; |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
transform: scale(1.05) translateZ(0px); |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scaleY(1); |
|
|
|
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: scale(1) translateZ(0px); |
|
|
|
|
|
z-index: 999; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes slideInX { |
|
|
|
|
|
|
|
|
@keyframes browseOutLeft { |
|
|
0% { |
|
|
0% { |
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleX(0); |
|
|
|
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg); |
|
|
} |
|
|
} |
|
|
100% { |
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scaleX(1); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
z-index: -1; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); |
|
|
|
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes slideOutY { |
|
|
|
|
|
|
|
|
@keyframes browseOutRight { |
|
|
0% { |
|
|
0% { |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
50% { |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scaleY(1); |
|
|
|
|
|
} |
|
|
} |
|
|
100% { |
|
|
100% { |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: scaleY(0); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes slideOutX { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Drop |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.drop.transition { |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); |
|
|
|
|
|
} |
|
|
|
|
|
.drop.transition.in { |
|
|
|
|
|
animation-name: dropIn; |
|
|
|
|
|
} |
|
|
|
|
|
.drop.transition.out { |
|
|
|
|
|
animation-name: dropOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Scale */ |
|
|
|
|
|
@keyframes dropIn { |
|
|
0% { |
|
|
0% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
transform: scaleX(1); |
|
|
|
|
|
|
|
|
transform: scale(1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes dropOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
100% { |
|
|
100% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
transform: scaleX(0); |
|
|
|
|
|
|
|
|
transform: scale(0); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Fades |
|
|
Fades |
|
|
---------------*/ |
|
|
---------------*/ |
|
@ -800,139 +589,299 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
/*-------------- |
|
|
Swing |
|
|
|
|
|
|
|
|
Flips |
|
|
---------------*/ |
|
|
---------------*/ |
|
|
|
|
|
|
|
|
@keyframes swingInX { |
|
|
|
|
|
|
|
|
.flip.transition.in, |
|
|
|
|
|
.flip.transition.out { |
|
|
|
|
|
perspective: 2000px; |
|
|
|
|
|
} |
|
|
|
|
|
.horizontal.flip.transition.in { |
|
|
|
|
|
animation-name: horizontalFlipIn; |
|
|
|
|
|
} |
|
|
|
|
|
.horizontal.flip.transition.out { |
|
|
|
|
|
animation-name: horizontalFlipOut; |
|
|
|
|
|
} |
|
|
|
|
|
.vertical.flip.transition.in { |
|
|
|
|
|
animation-name: verticalFlipIn; |
|
|
|
|
|
} |
|
|
|
|
|
.vertical.flip.transition.out { |
|
|
|
|
|
animation-name: verticalFlipOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Horizontal */ |
|
|
|
|
|
@keyframes horizontalFlipIn { |
|
|
0% { |
|
|
0% { |
|
|
transform: perspective(1000px) rotateX(-90deg); |
|
|
|
|
|
|
|
|
transform: rotateY(-90deg); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
40% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(20deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
60% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(-10deg); |
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateY(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
80% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(5deg); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
/* Horizontal */ |
|
|
|
|
|
@keyframes horizontalFlipOut { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateY(0deg); |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateY(90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Vertical */ |
|
|
|
|
|
@keyframes verticalFlipIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: rotateX(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
100% { |
|
|
100% { |
|
|
transform: perspective(1000px) rotateX(0deg); |
|
|
|
|
|
|
|
|
transform: rotateX(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes swingInY { |
|
|
|
|
|
|
|
|
@keyframes verticalFlipOut { |
|
|
0% { |
|
|
0% { |
|
|
transform: perspective(1000px) rotateY(-90deg); |
|
|
|
|
|
|
|
|
transform: rotateX(0deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: rotateX(-90deg); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
40% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(20deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Scale |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
60% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(-10deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.scale.transition.in { |
|
|
|
|
|
animation-name: scaleIn; |
|
|
|
|
|
} |
|
|
|
|
|
.scale.transition.out { |
|
|
|
|
|
animation-name: scaleOut; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
80% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(5deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
|
/* Scale */ |
|
|
|
|
|
@keyframes scaleIn { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0.7); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes swingOutX { |
|
|
|
|
|
|
|
|
@keyframes scaleOut { |
|
|
0% { |
|
|
0% { |
|
|
transform: perspective(1000px) rotateX(0deg); |
|
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
30% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(20deg); |
|
|
|
|
|
opacity:1; |
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scale(0.7); |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Slide |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
|
|
|
.transition.slide.in, |
|
|
|
|
|
.transition.slide.in.down { |
|
|
|
|
|
animation-name: slideInY; |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.up { |
|
|
|
|
|
animation-name: slideInY; |
|
|
|
|
|
transform-origin: bottom center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.left { |
|
|
|
|
|
animation-name: slideInX; |
|
|
|
|
|
transform-origin: center right; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.in.right { |
|
|
|
|
|
animation-name: slideInX; |
|
|
|
|
|
transform-origin: center left; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.transition.slide.out, |
|
|
|
|
|
.transition.slide.out.down { |
|
|
|
|
|
animation-name: slideOutY; |
|
|
|
|
|
transform-origin: top center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.out.up { |
|
|
|
|
|
animation-name: slideOutY; |
|
|
|
|
|
transform-origin: bottom center; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.out.left { |
|
|
|
|
|
animation-name: slideOutX; |
|
|
|
|
|
transform-origin: center right; |
|
|
|
|
|
} |
|
|
|
|
|
.transition.slide.out.right { |
|
|
|
|
|
animation-name: slideOutX; |
|
|
|
|
|
transform-origin: center left; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes slideInY { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleY(0); |
|
|
|
|
|
} |
|
|
100% { |
|
|
100% { |
|
|
transform: perspective(1000px) rotateX(-90deg); |
|
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scaleY(1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes slideInX { |
|
|
|
|
|
0% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleX(0); |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scaleX(1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@keyframes swingOutY { |
|
|
|
|
|
|
|
|
@keyframes slideOutY { |
|
|
0% { |
|
|
0% { |
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
|
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scaleY(1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
30% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(20deg); |
|
|
|
|
|
opacity:1; |
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleY(0); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes slideOutX { |
|
|
|
|
|
0% { |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
transform: scaleX(1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: perspective(1000px) rotateY(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
|
|
|
transform: scaleX(0); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*-------------- |
|
|
|
|
|
Swing |
|
|
|
|
|
---------------*/ |
|
|
|
|
|
|
|
|
.transition.swing, |
|
|
.transition.swing, |
|
|
.transition.swing.in, |
|
|
.transition.swing.in, |
|
|
.transition.swing.in.down{ |
|
|
.transition.swing.in.down{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:top center; |
|
|
|
|
|
|
|
|
transform-origin: top center; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingInX; |
|
|
animation-name: swingInX; |
|
|
} |
|
|
} |
|
|
.transition.swing.in.up{ |
|
|
.transition.swing.in.up{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:bottom center; |
|
|
transform-origin:bottom center; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingInX; |
|
|
animation-name: swingInX; |
|
|
} |
|
|
} |
|
|
.transition.swing.in.left{ |
|
|
.transition.swing.in.left{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:center right; |
|
|
|
|
|
|
|
|
transform-origin: center right; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingInY; |
|
|
animation-name: swingInY; |
|
|
} |
|
|
} |
|
|
.transition.swing.in.right{ |
|
|
.transition.swing.in.right{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:center left; |
|
|
|
|
|
|
|
|
transform-origin: center left; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingInY; |
|
|
animation-name: swingInY; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.transition.swing.out.down, |
|
|
.transition.swing.out.down, |
|
|
.transition.swing.out{ |
|
|
.transition.swing.out{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:top center; |
|
|
|
|
|
|
|
|
transform-origin: top center; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingOutX; |
|
|
animation-name: swingOutX; |
|
|
} |
|
|
} |
|
|
.transition.swing.out.up{ |
|
|
.transition.swing.out.up{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:bottom center; |
|
|
transform-origin:bottom center; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingOutX; |
|
|
animation-name: swingOutX; |
|
|
} |
|
|
} |
|
|
.transition.swing.out.left{ |
|
|
.transition.swing.out.left{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:center right; |
|
|
|
|
|
|
|
|
transform-origin: center right; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingOutY; |
|
|
animation-name: swingOutY; |
|
|
} |
|
|
} |
|
|
.transition.swing.out.right{ |
|
|
.transition.swing.out.right{ |
|
|
backface-visibility: visible !important; |
|
|
|
|
|
transform-origin:center left; |
|
|
|
|
|
|
|
|
transform-origin: center left; |
|
|
transition-timing-function: ease-in; |
|
|
transition-timing-function: ease-in; |
|
|
animation-name: swingOutY; |
|
|
animation-name: swingOutY; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes swingInX { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
40% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(20deg); |
|
|
|
|
|
} |
|
|
|
|
|
60% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(-10deg); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(5deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes swingInY { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
40% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(20deg); |
|
|
|
|
|
} |
|
|
|
|
|
60% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(-10deg); |
|
|
|
|
|
} |
|
|
|
|
|
80% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(5deg); |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes swingOutX { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
30% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(20deg); |
|
|
|
|
|
opacity:1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: perspective(1000px) rotateX(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
@keyframes swingOutY { |
|
|
|
|
|
0% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
30% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(20deg); |
|
|
|
|
|
opacity:1; |
|
|
|
|
|
} |
|
|
|
|
|
100% { |
|
|
|
|
|
transform: perspective(1000px) rotateY(-90deg); |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|