| /* ========================================================================== |
| Animations |
| ========================================================================== */ |
| |
| .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;} |
| |
| /* |
| Fade in |
| ========================================================================== */ |
| |
| @-webkit-keyframes fadeIn { |
| 0% {opacity: 0;} |
| 100% {opacity: 1;} |
| } |
| @-moz-keyframes fadeIn { |
| 0% {opacity: 0;} |
| 100% {opacity: 1;} |
| } |
| @-o-keyframes fadeIn { |
| 0% {opacity: 0;} |
| 100% {opacity: 1;} |
| } |
| @keyframes fadeIn { |
| 0% {opacity: 0;} |
| 100% {opacity: 1;} |
| } |
| |
| .fadeIn { |
| -webkit-animation-name: fadeIn; |
| -moz-animation-name: fadeIn; |
| -o-animation-name: fadeIn; |
| animation-name: fadeIn; |
| } |
| |
| @-webkit-keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-20px); |
| } |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| } |
| } |
| @-moz-keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| -moz-transform: translateY(-20px); |
| } |
| 100% { |
| opacity: 1; |
| -moz-transform: translateY(0); |
| } |
| } |
| @-o-keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| -o-transform: translateY(-20px); |
| } |
| 100% { |
| opacity: 1; |
| -o-transform: translateY(0); |
| } |
| } |
| @keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| 100% { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInDown { |
| -webkit-animation-name: fadeInDown; |
| -moz-animation-name: fadeInDown; |
| -o-animation-name: fadeInDown; |
| animation-name: fadeInDown; |
| } |
| |
| @-webkit-keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| } |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| } |
| } |
| @-moz-keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| -moz-transform: translateY(-2000px); |
| } |
| 100% { |
| opacity: 1; |
| -moz-transform: translateY(0); |
| } |
| } |
| @-o-keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| -o-transform: translateY(-2000px); |
| } |
| 100% { |
| opacity: 1; |
| -o-transform: translateY(0); |
| } |
| } |
| @keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| transform: translateY(-2000px); |
| } |
| 100% { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInDownBig { |
| -webkit-animation-name: fadeInDownBig; |
| -moz-animation-name: fadeInDownBig; |
| -o-animation-name: fadeInDownBig; |
| animation-name: fadeInDownBig; |
| } |
| |
| /* |
| Bounce |
| ========================================================================== */ |
| |
| @-webkit-keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| -webkit-transform: scale(.3); |
| } |
| 50% { |
| opacity: 1; |
| -webkit-transform: scale(1.05); |
| } |
| 70% { |
| -webkit-transform: scale(.9); |
| } |
| 100% { |
| -webkit-transform: scale(1); |
| } |
| } |
| @-moz-keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| -moz-transform: scale(.3); |
| } |
| 50% { |
| opacity: 1; |
| -moz-transform: scale(1.05); |
| } |
| 70% { |
| -moz-transform: scale(.9); |
| } |
| 100% { |
| -moz-transform: scale(1); |
| } |
| } |
| @-o-keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| -o-transform: scale(.3); |
| } |
| 50% { |
| opacity: 1; |
| -o-transform: scale(1.05); |
| } |
| 70% { |
| -o-transform: scale(.9); |
| } |
| 100% { |
| -o-transform: scale(1); |
| } |
| } |
| @keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| transform: scale(.3); |
| } |
| 50% { |
| opacity: 1; |
| transform: scale(1.05); |
| } |
| 70% { |
| transform: scale(.9); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| |
| .bounceIn { |
| -webkit-animation-name: bounceIn; |
| -moz-animation-name: bounceIn; |
| -o-animation-name: bounceIn; |
| animation-name: bounceIn; |
| } |
| |
| @-webkit-keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateY(30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateY(-10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| } |
| } |
| |
| @-moz-keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| -moz-transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -moz-transform: translateY(30px); |
| } |
| |
| 80% { |
| -moz-transform: translateY(-10px); |
| } |
| |
| 100% { |
| -moz-transform: translateY(0); |
| } |
| } |
| |
| @-o-keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| -o-transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -o-transform: translateY(30px); |
| } |
| |
| 80% { |
| -o-transform: translateY(-10px); |
| } |
| |
| 100% { |
| -o-transform: translateY(0); |
| } |
| } |
| |
| @keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| transform: translateY(30px); |
| } |
| |
| 80% { |
| transform: translateY(-10px); |
| } |
| |
| 100% { |
| transform: translateY(0); |
| } |
| } |
| |
| .bounceInDown { |
| -webkit-animation-name: bounceInDown; |
| -moz-animation-name: bounceInDown; |
| -o-animation-name: bounceInDown; |
| animation-name: bounceInDown; |
| } |
| |
| /* |
| Drop |
| ========================================================================== */ |
| |
| @-webkit-keyframes drop { |
| 0% { |
| -webkit-transform: translateY(-500px); |
| } |
| 100% { |
| -webkit-transform: translateY(0); |
| } |
| } |
| @-moz-keyframes drop { |
| 0% { |
| -moz-transform: translateY(-500px); |
| } |
| 100% { |
| -moz-transform: translateY(0); |
| } |
| } |
| @-o-keyframes drop { |
| 0% { |
| -o-transform: translateY(-500px); |
| } |
| 100% { |
| -o-transform: translateY(0); |
| } |
| } |
| @keyframes drop { |
| 0% { |
| transform: translateY(-500px); |
| } |
| 100% { |
| transform: translateY(0); |
| } |
| } |
| |
| .drop { |
| -webkit-animation-name: drop; |
| -moz-animation-name: drop; |
| -o-animation-name: drop; |
| animation-name: drop; |
| } |
| |
| /* |
| DL Menu In/Out |
| ========================================================================== */ |
| |
| @-webkit-keyframes MenuAnimOut { |
| 100% { |
| -webkit-transform: translateZ(300px); |
| opacity: 0; |
| } |
| } |
| @-moz-keyframes MenuAnimOut { |
| 100% { |
| -moz-transform: translateZ(300px); |
| opacity: 0; |
| } |
| } |
| @keyframes MenuAnimOut { |
| 100% { |
| transform: translateZ(300px); |
| opacity: 0; |
| } |
| } |
| |
| @-webkit-keyframes MenuAnimIn { |
| 0% { |
| -webkit-transform: translateZ(300px); |
| opacity: 0; |
| } |
| 100% { |
| -webkit-transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| @-moz-keyframes MenuAnimIn { |
| 0% { |
| -moz-transform: translateZ(300px); |
| opacity: 0; |
| } |
| 100% { |
| -moz-transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| @keyframes MenuAnimIn { |
| 0% { |
| transform: translateZ(300px); |
| opacity: 0; |
| } |
| 100% { |
| transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| |
| @-webkit-keyframes SubMenuAnimIn { |
| 0% { |
| -webkit-transform: translateZ(-300px); |
| opacity: 0; |
| } |
| 100% { |
| -webkit-transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| @-moz-keyframes SubMenuAnimIn { |
| 0% { |
| -moz-transform: translateZ(-300px); |
| opacity: 0; |
| } |
| 100% { |
| -moz-transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| @keyframes SubMenuAnimIn { |
| 0% { |
| transform: translateZ(-300px); |
| opacity: 0; |
| } |
| 100% { |
| transform: translateZ(0px); |
| opacity: 1; |
| } |
| } |
| |
| @-webkit-keyframes SubMenuAnimOut { |
| 0% { |
| -webkit-transform: translateZ(0px); |
| opacity: 1; |
| } |
| 100% { |
| -webkit-transform: translateZ(-300px); |
| opacity: 0; |
| } |
| } |
| @-moz-keyframes SubMenuAnimOut { |
| 0% { |
| -moz-transform: translateZ(0px); |
| opacity: 1; |
| } |
| 100% { |
| -moz-transform: translateZ(-300px); |
| opacity: 0; |
| } |
| } |
| @keyframes SubMenuAnimOut { |
| 0% { |
| transform: translateZ(0px); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateZ(-300px); |
| opacity: 0; |
| } |
| } |