Вход Регистрация
Просмотр архива Веб Портфолио - Байгу автор!!!
Файл: web-kgvip/css/animate.css
Строк: 2515
@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; }
К файлу
К просмотру архива
Онлайн: 2
Реклама
Наш надёжный хостинг партнер
Купить рекламу