| @charset "UTF-8"; |
| |
| |
| /*! |
| Animate.css - http://daneden.me/animate |
| Licensed under the MIT license |
| |
| Copyright (c) 2013 Daniel Eden |
| |
| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
| |
| The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
| |
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| */ |
| |
| .animated { |
| -webkit-animation-duration: 1s; |
| animation-duration: 1s; |
| -webkit-animation-fill-mode: both; |
| animation-fill-mode: both; |
| } |
| |
| .animated.hinge { |
| -webkit-animation-duration: 2s; |
| animation-duration: 2s; |
| } |
| |
| @-webkit-keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 40% { |
| -webkit-transform: translateY(-30px); |
| transform: translateY(-30px); |
| } |
| |
| 60% { |
| -webkit-transform: translateY(-15px); |
| transform: translateY(-15px); |
| } |
| } |
| |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 40% { |
| -webkit-transform: translateY(-30px); |
| -ms-transform: translateY(-30px); |
| transform: translateY(-30px); |
| } |
| |
| 60% { |
| -webkit-transform: translateY(-15px); |
| -ms-transform: translateY(-15px); |
| transform: translateY(-15px); |
| } |
| } |
| |
| .bounce { |
| -webkit-animation-name: bounce; |
| animation-name: bounce; |
| } |
| |
| @-webkit-keyframes flash { |
| 0%, 50%, 100% { |
| opacity: 1; |
| } |
| |
| 25%, 75% { |
| opacity: 0; |
| } |
| } |
| |
| @keyframes flash { |
| 0%, 50%, 100% { |
| opacity: 1; |
| } |
| |
| 25%, 75% { |
| opacity: 0; |
| } |
| } |
| |
| .flash { |
| -webkit-animation-name: flash; |
| animation-name: flash; |
| } |
| |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
| |
| @-webkit-keyframes pulse { |
| 0% { |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 50% { |
| -webkit-transform: scale(1.1); |
| transform: scale(1.1); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| } |
| |
| @keyframes pulse { |
| 0% { |
| -webkit-transform: scale(1); |
| -ms-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 50% { |
| -webkit-transform: scale(1.1); |
| -ms-transform: scale(1.1); |
| transform: scale(1.1); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1); |
| -ms-transform: scale(1); |
| transform: scale(1); |
| } |
| } |
| |
| .pulse { |
| -webkit-animation-name: pulse; |
| animation-name: pulse; |
| } |
| |
| @-webkit-keyframes shake { |
| 0%, 100% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 10%, 30%, 50%, 70%, 90% { |
| -webkit-transform: translateX(-10px); |
| transform: translateX(-10px); |
| } |
| |
| 20%, 40%, 60%, 80% { |
| -webkit-transform: translateX(10px); |
| transform: translateX(10px); |
| } |
| } |
| |
| @keyframes shake { |
| 0%, 100% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 10%, 30%, 50%, 70%, 90% { |
| -webkit-transform: translateX(-10px); |
| -ms-transform: translateX(-10px); |
| transform: translateX(-10px); |
| } |
| |
| 20%, 40%, 60%, 80% { |
| -webkit-transform: translateX(10px); |
| -ms-transform: translateX(10px); |
| transform: translateX(10px); |
| } |
| } |
| |
| .shake { |
| -webkit-animation-name: shake; |
| animation-name: shake; |
| } |
| |
| @-webkit-keyframes swing { |
| 20% { |
| -webkit-transform: rotate(15deg); |
| transform: rotate(15deg); |
| } |
| |
| 40% { |
| -webkit-transform: rotate(-10deg); |
| transform: rotate(-10deg); |
| } |
| |
| 60% { |
| -webkit-transform: rotate(5deg); |
| transform: rotate(5deg); |
| } |
| |
| 80% { |
| -webkit-transform: rotate(-5deg); |
| transform: rotate(-5deg); |
| } |
| |
| 100% { |
| -webkit-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| } |
| |
| @keyframes swing { |
| 20% { |
| -webkit-transform: rotate(15deg); |
| -ms-transform: rotate(15deg); |
| transform: rotate(15deg); |
| } |
| |
| 40% { |
| -webkit-transform: rotate(-10deg); |
| -ms-transform: rotate(-10deg); |
| transform: rotate(-10deg); |
| } |
| |
| 60% { |
| -webkit-transform: rotate(5deg); |
| -ms-transform: rotate(5deg); |
| transform: rotate(5deg); |
| } |
| |
| 80% { |
| -webkit-transform: rotate(-5deg); |
| -ms-transform: rotate(-5deg); |
| transform: rotate(-5deg); |
| } |
| |
| 100% { |
| -webkit-transform: rotate(0deg); |
| -ms-transform: rotate(0deg); |
| transform: rotate(0deg); |
| } |
| } |
| |
| .swing { |
| -webkit-transform-origin: top center; |
| -ms-transform-origin: top center; |
| transform-origin: top center; |
| -webkit-animation-name: swing; |
| animation-name: swing; |
| } |
| |
| @-webkit-keyframes tada { |
| 0% { |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 10%, 20% { |
| -webkit-transform: scale(0.9) rotate(-3deg); |
| transform: scale(0.9) rotate(-3deg); |
| } |
| |
| 30%, 50%, 70%, 90% { |
| -webkit-transform: scale(1.1) rotate(3deg); |
| transform: scale(1.1) rotate(3deg); |
| } |
| |
| 40%, 60%, 80% { |
| -webkit-transform: scale(1.1) rotate(-3deg); |
| transform: scale(1.1) rotate(-3deg); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1) rotate(0); |
| transform: scale(1) rotate(0); |
| } |
| } |
| |
| @keyframes tada { |
| 0% { |
| -webkit-transform: scale(1); |
| -ms-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 10%, 20% { |
| -webkit-transform: scale(0.9) rotate(-3deg); |
| -ms-transform: scale(0.9) rotate(-3deg); |
| transform: scale(0.9) rotate(-3deg); |
| } |
| |
| 30%, 50%, 70%, 90% { |
| -webkit-transform: scale(1.1) rotate(3deg); |
| -ms-transform: scale(1.1) rotate(3deg); |
| transform: scale(1.1) rotate(3deg); |
| } |
| |
| 40%, 60%, 80% { |
| -webkit-transform: scale(1.1) rotate(-3deg); |
| -ms-transform: scale(1.1) rotate(-3deg); |
| transform: scale(1.1) rotate(-3deg); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1) rotate(0); |
| -ms-transform: scale(1) rotate(0); |
| transform: scale(1) rotate(0); |
| } |
| } |
| |
| .tada { |
| -webkit-animation-name: tada; |
| animation-name: tada; |
| } |
| |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
| |
| @-webkit-keyframes wobble { |
| 0% { |
| -webkit-transform: translateX(0%); |
| transform: translateX(0%); |
| } |
| |
| 15% { |
| -webkit-transform: translateX(-25%) rotate(-5deg); |
| transform: translateX(-25%) rotate(-5deg); |
| } |
| |
| 30% { |
| -webkit-transform: translateX(20%) rotate(3deg); |
| transform: translateX(20%) rotate(3deg); |
| } |
| |
| 45% { |
| -webkit-transform: translateX(-15%) rotate(-3deg); |
| transform: translateX(-15%) rotate(-3deg); |
| } |
| |
| 60% { |
| -webkit-transform: translateX(10%) rotate(2deg); |
| transform: translateX(10%) rotate(2deg); |
| } |
| |
| 75% { |
| -webkit-transform: translateX(-5%) rotate(-1deg); |
| transform: translateX(-5%) rotate(-1deg); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0%); |
| transform: translateX(0%); |
| } |
| } |
| |
| @keyframes wobble { |
| 0% { |
| -webkit-transform: translateX(0%); |
| -ms-transform: translateX(0%); |
| transform: translateX(0%); |
| } |
| |
| 15% { |
| -webkit-transform: translateX(-25%) rotate(-5deg); |
| -ms-transform: translateX(-25%) rotate(-5deg); |
| transform: translateX(-25%) rotate(-5deg); |
| } |
| |
| 30% { |
| -webkit-transform: translateX(20%) rotate(3deg); |
| -ms-transform: translateX(20%) rotate(3deg); |
| transform: translateX(20%) rotate(3deg); |
| } |
| |
| 45% { |
| -webkit-transform: translateX(-15%) rotate(-3deg); |
| -ms-transform: translateX(-15%) rotate(-3deg); |
| transform: translateX(-15%) rotate(-3deg); |
| } |
| |
| 60% { |
| -webkit-transform: translateX(10%) rotate(2deg); |
| -ms-transform: translateX(10%) rotate(2deg); |
| transform: translateX(10%) rotate(2deg); |
| } |
| |
| 75% { |
| -webkit-transform: translateX(-5%) rotate(-1deg); |
| -ms-transform: translateX(-5%) rotate(-1deg); |
| transform: translateX(-5%) rotate(-1deg); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0%); |
| -ms-transform: translateX(0%); |
| transform: translateX(0%); |
| } |
| } |
| |
| .wobble { |
| -webkit-animation-name: wobble; |
| animation-name: wobble; |
| } |
| |
| @-webkit-keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| -webkit-transform: scale(.3); |
| transform: scale(.3); |
| } |
| |
| 50% { |
| opacity: 1; |
| -webkit-transform: scale(1.05); |
| transform: scale(1.05); |
| } |
| |
| 70% { |
| -webkit-transform: scale(.9); |
| transform: scale(.9); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| } |
| |
| @keyframes bounceIn { |
| 0% { |
| opacity: 0; |
| -webkit-transform: scale(.3); |
| -ms-transform: scale(.3); |
| transform: scale(.3); |
| } |
| |
| 50% { |
| opacity: 1; |
| -webkit-transform: scale(1.05); |
| -ms-transform: scale(1.05); |
| transform: scale(1.05); |
| } |
| |
| 70% { |
| -webkit-transform: scale(.9); |
| -ms-transform: scale(.9); |
| transform: scale(.9); |
| } |
| |
| 100% { |
| -webkit-transform: scale(1); |
| -ms-transform: scale(1); |
| transform: scale(1); |
| } |
| } |
| |
| .bounceIn { |
| -webkit-animation-name: bounceIn; |
| animation-name: bounceIn; |
| } |
| |
| @-webkit-keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateY(30px); |
| transform: translateY(30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateY(-10px); |
| transform: translateY(-10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes bounceInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateY(30px); |
| -ms-transform: translateY(30px); |
| transform: translateY(30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateY(-10px); |
| -ms-transform: translateY(-10px); |
| transform: translateY(-10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .bounceInDown { |
| -webkit-animation-name: bounceInDown; |
| animation-name: bounceInDown; |
| } |
| |
| @-webkit-keyframes bounceInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateX(30px); |
| transform: translateX(30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateX(-10px); |
| transform: translateX(-10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes bounceInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateX(30px); |
| -ms-transform: translateX(30px); |
| transform: translateX(30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateX(-10px); |
| -ms-transform: translateX(-10px); |
| transform: translateX(-10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .bounceInLeft { |
| -webkit-animation-name: bounceInLeft; |
| animation-name: bounceInLeft; |
| } |
| |
| @-webkit-keyframes bounceInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateX(-30px); |
| transform: translateX(-30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateX(10px); |
| transform: translateX(10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes bounceInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateX(-30px); |
| -ms-transform: translateX(-30px); |
| transform: translateX(-30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateX(10px); |
| -ms-transform: translateX(10px); |
| transform: translateX(10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .bounceInRight { |
| -webkit-animation-name: bounceInRight; |
| animation-name: bounceInRight; |
| } |
| |
| @-webkit-keyframes bounceInUp { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateY(-30px); |
| transform: translateY(-30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateY(10px); |
| transform: translateY(10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes bounceInUp { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| -ms-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| |
| 60% { |
| opacity: 1; |
| -webkit-transform: translateY(-30px); |
| -ms-transform: translateY(-30px); |
| transform: translateY(-30px); |
| } |
| |
| 80% { |
| -webkit-transform: translateY(10px); |
| -ms-transform: translateY(10px); |
| transform: translateY(10px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .bounceInUp { |
| -webkit-animation-name: bounceInUp; |
| animation-name: bounceInUp; |
| } |
| |
| @-webkit-keyframes bounceOut { |
| 0% { |
| -webkit-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 25% { |
| -webkit-transform: scale(.95); |
| transform: scale(.95); |
| } |
| |
| 50% { |
| opacity: 1; |
| -webkit-transform: scale(1.1); |
| transform: scale(1.1); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: scale(.3); |
| transform: scale(.3); |
| } |
| } |
| |
| @keyframes bounceOut { |
| 0% { |
| -webkit-transform: scale(1); |
| -ms-transform: scale(1); |
| transform: scale(1); |
| } |
| |
| 25% { |
| -webkit-transform: scale(.95); |
| -ms-transform: scale(.95); |
| transform: scale(.95); |
| } |
| |
| 50% { |
| opacity: 1; |
| -webkit-transform: scale(1.1); |
| -ms-transform: scale(1.1); |
| transform: scale(1.1); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: scale(.3); |
| -ms-transform: scale(.3); |
| transform: scale(.3); |
| } |
| } |
| |
| .bounceOut { |
| -webkit-animation-name: bounceOut; |
| animation-name: bounceOut; |
| } |
| |
| @-webkit-keyframes bounceOutDown { |
| 0% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| } |
| |
| @keyframes bounceOutDown { |
| 0% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateY(-20px); |
| -ms-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| -ms-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| } |
| |
| .bounceOutDown { |
| -webkit-animation-name: bounceOutDown; |
| animation-name: bounceOutDown; |
| } |
| |
| @-webkit-keyframes bounceOutLeft { |
| 0% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| @keyframes bounceOutLeft { |
| 0% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateX(20px); |
| -ms-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| .bounceOutLeft { |
| -webkit-animation-name: bounceOutLeft; |
| animation-name: bounceOutLeft; |
| } |
| |
| @-webkit-keyframes bounceOutRight { |
| 0% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| @keyframes bounceOutRight { |
| 0% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateX(-20px); |
| -ms-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| .bounceOutRight { |
| -webkit-animation-name: bounceOutRight; |
| animation-name: bounceOutRight; |
| } |
| |
| @-webkit-keyframes bounceOutUp { |
| 0% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| @keyframes bounceOutUp { |
| 0% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 20% { |
| opacity: 1; |
| -webkit-transform: translateY(20px); |
| -ms-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| .bounceOutUp { |
| -webkit-animation-name: bounceOutUp; |
| animation-name: bounceOutUp; |
| } |
| |
| @-webkit-keyframes fadeIn { |
| 0% { |
| opacity: 0; |
| } |
| |
| 100% { |
| opacity: 1; |
| } |
| } |
| |
| @keyframes fadeIn { |
| 0% { |
| opacity: 0; |
| } |
| |
| 100% { |
| opacity: 1; |
| } |
| } |
| |
| .fadeIn { |
| -webkit-animation-name: fadeIn; |
| animation-name: fadeIn; |
| } |
| |
| @-webkit-keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes fadeInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-20px); |
| -ms-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInDown { |
| -webkit-animation-name: fadeInDown; |
| animation-name: fadeInDown; |
| } |
| |
| @-webkit-keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes fadeInDownBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInDownBig { |
| -webkit-animation-name: fadeInDownBig; |
| animation-name: fadeInDownBig; |
| } |
| |
| @-webkit-keyframes fadeInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes fadeInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-20px); |
| -ms-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .fadeInLeft { |
| -webkit-animation-name: fadeInLeft; |
| animation-name: fadeInLeft; |
| } |
| |
| @-webkit-keyframes fadeInLeftBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes fadeInLeftBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .fadeInLeftBig { |
| -webkit-animation-name: fadeInLeftBig; |
| animation-name: fadeInLeftBig; |
| } |
| |
| @-webkit-keyframes fadeInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes fadeInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(20px); |
| -ms-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .fadeInRight { |
| -webkit-animation-name: fadeInRight; |
| animation-name: fadeInRight; |
| } |
| |
| @-webkit-keyframes fadeInRightBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes fadeInRightBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .fadeInRightBig { |
| -webkit-animation-name: fadeInRightBig; |
| animation-name: fadeInRightBig; |
| } |
| |
| @-webkit-keyframes fadeInUp { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes fadeInUp { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(20px); |
| -ms-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInUp { |
| -webkit-animation-name: fadeInUp; |
| animation-name: fadeInUp; |
| } |
| |
| @-webkit-keyframes fadeInUpBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes fadeInUpBig { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| -ms-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .fadeInUpBig { |
| -webkit-animation-name: fadeInUpBig; |
| animation-name: fadeInUpBig; |
| } |
| |
| @-webkit-keyframes fadeOut { |
| 0% { |
| opacity: 1; |
| } |
| |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| @keyframes fadeOut { |
| 0% { |
| opacity: 1; |
| } |
| |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| .fadeOut { |
| -webkit-animation-name: fadeOut; |
| animation-name: fadeOut; |
| } |
| |
| @-webkit-keyframes fadeOutDown { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| } |
| |
| @keyframes fadeOutDown { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(20px); |
| -ms-transform: translateY(20px); |
| transform: translateY(20px); |
| } |
| } |
| |
| .fadeOutDown { |
| -webkit-animation-name: fadeOutDown; |
| animation-name: fadeOutDown; |
| } |
| |
| @-webkit-keyframes fadeOutDownBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| } |
| |
| @keyframes fadeOutDownBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(2000px); |
| -ms-transform: translateY(2000px); |
| transform: translateY(2000px); |
| } |
| } |
| |
| .fadeOutDownBig { |
| -webkit-animation-name: fadeOutDownBig; |
| animation-name: fadeOutDownBig; |
| } |
| |
| @-webkit-keyframes fadeOutLeft { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| } |
| |
| @keyframes fadeOutLeft { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-20px); |
| -ms-transform: translateX(-20px); |
| transform: translateX(-20px); |
| } |
| } |
| |
| .fadeOutLeft { |
| -webkit-animation-name: fadeOutLeft; |
| animation-name: fadeOutLeft; |
| } |
| |
| @-webkit-keyframes fadeOutLeftBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| @keyframes fadeOutLeftBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| .fadeOutLeftBig { |
| -webkit-animation-name: fadeOutLeftBig; |
| animation-name: fadeOutLeftBig; |
| } |
| |
| @-webkit-keyframes fadeOutRight { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| } |
| |
| @keyframes fadeOutRight { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(20px); |
| -ms-transform: translateX(20px); |
| transform: translateX(20px); |
| } |
| } |
| |
| .fadeOutRight { |
| -webkit-animation-name: fadeOutRight; |
| animation-name: fadeOutRight; |
| } |
| |
| @-webkit-keyframes fadeOutRightBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| @keyframes fadeOutRightBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| .fadeOutRightBig { |
| -webkit-animation-name: fadeOutRightBig; |
| animation-name: fadeOutRightBig; |
| } |
| |
| @-webkit-keyframes fadeOutUp { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| } |
| |
| @keyframes fadeOutUp { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-20px); |
| -ms-transform: translateY(-20px); |
| transform: translateY(-20px); |
| } |
| } |
| |
| .fadeOutUp { |
| -webkit-animation-name: fadeOutUp; |
| animation-name: fadeOutUp; |
| } |
| |
| @-webkit-keyframes fadeOutUpBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| @keyframes fadeOutUpBig { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| .fadeOutUpBig { |
| -webkit-animation-name: fadeOutUpBig; |
| animation-name: fadeOutUpBig; |
| } |
| |
| @-webkit-keyframes flip { |
| 0% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); |
| transform: perspective(400px) translateZ(0) rotateY(0) scale(1); |
| -webkit-animation-timing-function: ease-out; |
| animation-timing-function: ease-out; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); |
| transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); |
| -webkit-animation-timing-function: ease-out; |
| animation-timing-function: ease-out; |
| } |
| |
| 50% { |
| -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); |
| transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| |
| 80% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); |
| transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); |
| transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| } |
| |
| @keyframes flip { |
| 0% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); |
| -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); |
| transform: perspective(400px) translateZ(0) rotateY(0) scale(1); |
| -webkit-animation-timing-function: ease-out; |
| animation-timing-function: ease-out; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); |
| -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); |
| transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); |
| -webkit-animation-timing-function: ease-out; |
| animation-timing-function: ease-out; |
| } |
| |
| 50% { |
| -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); |
| -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); |
| transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| |
| 80% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); |
| -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); |
| transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); |
| -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); |
| transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| } |
| |
| .animated.flip { |
| -webkit-backface-visibility: visible; |
| -ms-backface-visibility: visible; |
| backface-visibility: visible; |
| -webkit-animation-name: flip; |
| animation-name: flip; |
| } |
| |
| @-webkit-keyframes flipInX { |
| 0% { |
| -webkit-transform: perspective(400px) rotateX(90deg); |
| transform: perspective(400px) rotateX(90deg); |
| opacity: 0; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) rotateX(-10deg); |
| transform: perspective(400px) rotateX(-10deg); |
| } |
| |
| 70% { |
| -webkit-transform: perspective(400px) rotateX(10deg); |
| transform: perspective(400px) rotateX(10deg); |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateX(0deg); |
| transform: perspective(400px) rotateX(0deg); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes flipInX { |
| 0% { |
| -webkit-transform: perspective(400px) rotateX(90deg); |
| -ms-transform: perspective(400px) rotateX(90deg); |
| transform: perspective(400px) rotateX(90deg); |
| opacity: 0; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) rotateX(-10deg); |
| -ms-transform: perspective(400px) rotateX(-10deg); |
| transform: perspective(400px) rotateX(-10deg); |
| } |
| |
| 70% { |
| -webkit-transform: perspective(400px) rotateX(10deg); |
| -ms-transform: perspective(400px) rotateX(10deg); |
| transform: perspective(400px) rotateX(10deg); |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateX(0deg); |
| -ms-transform: perspective(400px) rotateX(0deg); |
| transform: perspective(400px) rotateX(0deg); |
| opacity: 1; |
| } |
| } |
| |
| .flipInX { |
| -webkit-backface-visibility: visible !important; |
| -ms-backface-visibility: visible !important; |
| backface-visibility: visible !important; |
| -webkit-animation-name: flipInX; |
| animation-name: flipInX; |
| } |
| |
| @-webkit-keyframes flipInY { |
| 0% { |
| -webkit-transform: perspective(400px) rotateY(90deg); |
| transform: perspective(400px) rotateY(90deg); |
| opacity: 0; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) rotateY(-10deg); |
| transform: perspective(400px) rotateY(-10deg); |
| } |
| |
| 70% { |
| -webkit-transform: perspective(400px) rotateY(10deg); |
| transform: perspective(400px) rotateY(10deg); |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateY(0deg); |
| transform: perspective(400px) rotateY(0deg); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes flipInY { |
| 0% { |
| -webkit-transform: perspective(400px) rotateY(90deg); |
| -ms-transform: perspective(400px) rotateY(90deg); |
| transform: perspective(400px) rotateY(90deg); |
| opacity: 0; |
| } |
| |
| 40% { |
| -webkit-transform: perspective(400px) rotateY(-10deg); |
| -ms-transform: perspective(400px) rotateY(-10deg); |
| transform: perspective(400px) rotateY(-10deg); |
| } |
| |
| 70% { |
| -webkit-transform: perspective(400px) rotateY(10deg); |
| -ms-transform: perspective(400px) rotateY(10deg); |
| transform: perspective(400px) rotateY(10deg); |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateY(0deg); |
| -ms-transform: perspective(400px) rotateY(0deg); |
| transform: perspective(400px) rotateY(0deg); |
| opacity: 1; |
| } |
| } |
| |
| .flipInY { |
| -webkit-backface-visibility: visible !important; |
| -ms-backface-visibility: visible !important; |
| backface-visibility: visible !important; |
| -webkit-animation-name: flipInY; |
| animation-name: flipInY; |
| } |
| |
| @-webkit-keyframes flipOutX { |
| 0% { |
| -webkit-transform: perspective(400px) rotateX(0deg); |
| transform: perspective(400px) rotateX(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateX(90deg); |
| transform: perspective(400px) rotateX(90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes flipOutX { |
| 0% { |
| -webkit-transform: perspective(400px) rotateX(0deg); |
| -ms-transform: perspective(400px) rotateX(0deg); |
| transform: perspective(400px) rotateX(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateX(90deg); |
| -ms-transform: perspective(400px) rotateX(90deg); |
| transform: perspective(400px) rotateX(90deg); |
| opacity: 0; |
| } |
| } |
| |
| .flipOutX { |
| -webkit-animation-name: flipOutX; |
| animation-name: flipOutX; |
| -webkit-backface-visibility: visible !important; |
| -ms-backface-visibility: visible !important; |
| backface-visibility: visible !important; |
| } |
| |
| @-webkit-keyframes flipOutY { |
| 0% { |
| -webkit-transform: perspective(400px) rotateY(0deg); |
| transform: perspective(400px) rotateY(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateY(90deg); |
| transform: perspective(400px) rotateY(90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes flipOutY { |
| 0% { |
| -webkit-transform: perspective(400px) rotateY(0deg); |
| -ms-transform: perspective(400px) rotateY(0deg); |
| transform: perspective(400px) rotateY(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: perspective(400px) rotateY(90deg); |
| -ms-transform: perspective(400px) rotateY(90deg); |
| transform: perspective(400px) rotateY(90deg); |
| opacity: 0; |
| } |
| } |
| |
| .flipOutY { |
| -webkit-backface-visibility: visible !important; |
| -ms-backface-visibility: visible !important; |
| backface-visibility: visible !important; |
| -webkit-animation-name: flipOutY; |
| animation-name: flipOutY; |
| } |
| |
| @-webkit-keyframes lightSpeedIn { |
| 0% { |
| -webkit-transform: translateX(100%) skewX(-30deg); |
| transform: translateX(100%) skewX(-30deg); |
| opacity: 0; |
| } |
| |
| 60% { |
| -webkit-transform: translateX(-20%) skewX(30deg); |
| transform: translateX(-20%) skewX(30deg); |
| opacity: 1; |
| } |
| |
| 80% { |
| -webkit-transform: translateX(0%) skewX(-15deg); |
| transform: translateX(0%) skewX(-15deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0%) skewX(0deg); |
| transform: translateX(0%) skewX(0deg); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes lightSpeedIn { |
| 0% { |
| -webkit-transform: translateX(100%) skewX(-30deg); |
| -ms-transform: translateX(100%) skewX(-30deg); |
| transform: translateX(100%) skewX(-30deg); |
| opacity: 0; |
| } |
| |
| 60% { |
| -webkit-transform: translateX(-20%) skewX(30deg); |
| -ms-transform: translateX(-20%) skewX(30deg); |
| transform: translateX(-20%) skewX(30deg); |
| opacity: 1; |
| } |
| |
| 80% { |
| -webkit-transform: translateX(0%) skewX(-15deg); |
| -ms-transform: translateX(0%) skewX(-15deg); |
| transform: translateX(0%) skewX(-15deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0%) skewX(0deg); |
| -ms-transform: translateX(0%) skewX(0deg); |
| transform: translateX(0%) skewX(0deg); |
| opacity: 1; |
| } |
| } |
| |
| .lightSpeedIn { |
| -webkit-animation-name: lightSpeedIn; |
| animation-name: lightSpeedIn; |
| -webkit-animation-timing-function: ease-out; |
| animation-timing-function: ease-out; |
| } |
| |
| @-webkit-keyframes lightSpeedOut { |
| 0% { |
| -webkit-transform: translateX(0%) skewX(0deg); |
| transform: translateX(0%) skewX(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: translateX(100%) skewX(-30deg); |
| transform: translateX(100%) skewX(-30deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes lightSpeedOut { |
| 0% { |
| -webkit-transform: translateX(0%) skewX(0deg); |
| -ms-transform: translateX(0%) skewX(0deg); |
| transform: translateX(0%) skewX(0deg); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform: translateX(100%) skewX(-30deg); |
| -ms-transform: translateX(100%) skewX(-30deg); |
| transform: translateX(100%) skewX(-30deg); |
| opacity: 0; |
| } |
| } |
| |
| .lightSpeedOut { |
| -webkit-animation-name: lightSpeedOut; |
| animation-name: lightSpeedOut; |
| -webkit-animation-timing-function: ease-in; |
| animation-timing-function: ease-in; |
| } |
| |
| @-webkit-keyframes rotateIn { |
| 0% { |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(-200deg); |
| transform: rotate(-200deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes rotateIn { |
| 0% { |
| -webkit-transform-origin: center center; |
| -ms-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(-200deg); |
| -ms-transform: rotate(-200deg); |
| transform: rotate(-200deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: center center; |
| -ms-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| .rotateIn { |
| -webkit-animation-name: rotateIn; |
| animation-name: rotateIn; |
| } |
| |
| @-webkit-keyframes rotateInDownLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes rotateInDownLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(-90deg); |
| -ms-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| .rotateInDownLeft { |
| -webkit-animation-name: rotateInDownLeft; |
| animation-name: rotateInDownLeft; |
| } |
| |
| @-webkit-keyframes rotateInDownRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes rotateInDownRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| .rotateInDownRight { |
| -webkit-animation-name: rotateInDownRight; |
| animation-name: rotateInDownRight; |
| } |
| |
| @-webkit-keyframes rotateInUpLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes rotateInUpLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| .rotateInUpLeft { |
| -webkit-animation-name: rotateInUpLeft; |
| animation-name: rotateInUpLeft; |
| } |
| |
| @-webkit-keyframes rotateInUpRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes rotateInUpRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(-90deg); |
| -ms-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| } |
| |
| .rotateInUpRight { |
| -webkit-animation-name: rotateInUpRight; |
| animation-name: rotateInUpRight; |
| } |
| |
| @-webkit-keyframes rotateOut { |
| 0% { |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(200deg); |
| transform: rotate(200deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes rotateOut { |
| 0% { |
| -webkit-transform-origin: center center; |
| -ms-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: center center; |
| -ms-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: rotate(200deg); |
| -ms-transform: rotate(200deg); |
| transform: rotate(200deg); |
| opacity: 0; |
| } |
| } |
| |
| .rotateOut { |
| -webkit-animation-name: rotateOut; |
| animation-name: rotateOut; |
| } |
| |
| @-webkit-keyframes rotateOutDownLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes rotateOutDownLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| } |
| |
| .rotateOutDownLeft { |
| -webkit-animation-name: rotateOutDownLeft; |
| animation-name: rotateOutDownLeft; |
| } |
| |
| @-webkit-keyframes rotateOutDownRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes rotateOutDownRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(-90deg); |
| -ms-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| } |
| |
| .rotateOutDownRight { |
| -webkit-animation-name: rotateOutDownRight; |
| animation-name: rotateOutDownRight; |
| } |
| |
| @-webkit-keyframes rotateOutUpLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes rotateOutUpLeft { |
| 0% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: left bottom; |
| -ms-transform-origin: left bottom; |
| transform-origin: left bottom; |
| -webkit-transform: rotate(-90deg); |
| -ms-transform: rotate(-90deg); |
| transform: rotate(-90deg); |
| opacity: 0; |
| } |
| } |
| |
| .rotateOutUpLeft { |
| -webkit-animation-name: rotateOutUpLeft; |
| animation-name: rotateOutUpLeft; |
| } |
| |
| @-webkit-keyframes rotateOutUpRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes rotateOutUpRight { |
| 0% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| opacity: 1; |
| } |
| |
| 100% { |
| -webkit-transform-origin: right bottom; |
| -ms-transform-origin: right bottom; |
| transform-origin: right bottom; |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| opacity: 0; |
| } |
| } |
| |
| .rotateOutUpRight { |
| -webkit-animation-name: rotateOutUpRight; |
| animation-name: rotateOutUpRight; |
| } |
| |
| @-webkit-keyframes slideInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes slideInDown { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| } |
| |
| .slideInDown { |
| -webkit-animation-name: slideInDown; |
| animation-name: slideInDown; |
| } |
| |
| @-webkit-keyframes slideInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes slideInLeft { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .slideInLeft { |
| -webkit-animation-name: slideInLeft; |
| animation-name: slideInLeft; |
| } |
| |
| @-webkit-keyframes slideInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| @keyframes slideInRight { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| |
| 100% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| } |
| |
| .slideInRight { |
| -webkit-animation-name: slideInRight; |
| animation-name: slideInRight; |
| } |
| |
| @-webkit-keyframes slideOutLeft { |
| 0% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| @keyframes slideOutLeft { |
| 0% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(-2000px); |
| -ms-transform: translateX(-2000px); |
| transform: translateX(-2000px); |
| } |
| } |
| |
| .slideOutLeft { |
| -webkit-animation-name: slideOutLeft; |
| animation-name: slideOutLeft; |
| } |
| |
| @-webkit-keyframes slideOutRight { |
| 0% { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| @keyframes slideOutRight { |
| 0% { |
| -webkit-transform: translateX(0); |
| -ms-transform: translateX(0); |
| transform: translateX(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(2000px); |
| -ms-transform: translateX(2000px); |
| transform: translateX(2000px); |
| } |
| } |
| |
| .slideOutRight { |
| -webkit-animation-name: slideOutRight; |
| animation-name: slideOutRight; |
| } |
| |
| @-webkit-keyframes slideOutUp { |
| 0% { |
| -webkit-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| @keyframes slideOutUp { |
| 0% { |
| -webkit-transform: translateY(0); |
| -ms-transform: translateY(0); |
| transform: translateY(0); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateY(-2000px); |
| -ms-transform: translateY(-2000px); |
| transform: translateY(-2000px); |
| } |
| } |
| |
| .slideOutUp { |
| -webkit-animation-name: slideOutUp; |
| animation-name: slideOutUp; |
| } |
| |
| @-webkit-keyframes hinge { |
| 0% { |
| -webkit-transform: rotate(0); |
| transform: rotate(0); |
| -webkit-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 20%, 60% { |
| -webkit-transform: rotate(80deg); |
| transform: rotate(80deg); |
| -webkit-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 40% { |
| -webkit-transform: rotate(60deg); |
| transform: rotate(60deg); |
| -webkit-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 80% { |
| -webkit-transform: rotate(60deg) translateY(0); |
| transform: rotate(60deg) translateY(0); |
| opacity: 1; |
| -webkit-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 100% { |
| -webkit-transform: translateY(700px); |
| transform: translateY(700px); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes hinge { |
| 0% { |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| transform: rotate(0); |
| -webkit-transform-origin: top left; |
| -ms-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 20%, 60% { |
| -webkit-transform: rotate(80deg); |
| -ms-transform: rotate(80deg); |
| transform: rotate(80deg); |
| -webkit-transform-origin: top left; |
| -ms-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 40% { |
| -webkit-transform: rotate(60deg); |
| -ms-transform: rotate(60deg); |
| transform: rotate(60deg); |
| -webkit-transform-origin: top left; |
| -ms-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 80% { |
| -webkit-transform: rotate(60deg) translateY(0); |
| -ms-transform: rotate(60deg) translateY(0); |
| transform: rotate(60deg) translateY(0); |
| opacity: 1; |
| -webkit-transform-origin: top left; |
| -ms-transform-origin: top left; |
| transform-origin: top left; |
| -webkit-animation-timing-function: ease-in-out; |
| animation-timing-function: ease-in-out; |
| } |
| |
| 100% { |
| -webkit-transform: translateY(700px); |
| -ms-transform: translateY(700px); |
| transform: translateY(700px); |
| opacity: 0; |
| } |
| } |
| |
| .hinge { |
| -webkit-animation-name: hinge; |
| animation-name: hinge; |
| } |
| |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
| |
| @-webkit-keyframes rollIn { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-100%) rotate(-120deg); |
| transform: translateX(-100%) rotate(-120deg); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0px) rotate(0deg); |
| transform: translateX(0px) rotate(0deg); |
| } |
| } |
| |
| @keyframes rollIn { |
| 0% { |
| opacity: 0; |
| -webkit-transform: translateX(-100%) rotate(-120deg); |
| -ms-transform: translateX(-100%) rotate(-120deg); |
| transform: translateX(-100%) rotate(-120deg); |
| } |
| |
| 100% { |
| opacity: 1; |
| -webkit-transform: translateX(0px) rotate(0deg); |
| -ms-transform: translateX(0px) rotate(0deg); |
| transform: translateX(0px) rotate(0deg); |
| } |
| } |
| |
| .rollIn { |
| -webkit-animation-name: rollIn; |
| animation-name: rollIn; |
| } |
| |
| /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
| |
| @-webkit-keyframes rollOut { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0px) rotate(0deg); |
| transform: translateX(0px) rotate(0deg); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(100%) rotate(120deg); |
| transform: translateX(100%) rotate(120deg); |
| } |
| } |
| |
| @keyframes rollOut { |
| 0% { |
| opacity: 1; |
| -webkit-transform: translateX(0px) rotate(0deg); |
| -ms-transform: translateX(0px) rotate(0deg); |
| transform: translateX(0px) rotate(0deg); |
| } |
| |
| 100% { |
| opacity: 0; |
| -webkit-transform: translateX(100%) rotate(120deg); |
| -ms-transform: translateX(100%) rotate(120deg); |
| transform: translateX(100%) rotate(120deg); |
| } |
| } |
| |
| .rollOut { |
| -webkit-animation-name: rollOut; |
| animation-name: rollOut; |
| } |