10096 lines
159 KiB
CSS
10096 lines
159 KiB
CSS
/*头像效果-start*/
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%
|
|
}
|
|
|
|
body {
|
|
margin: 0
|
|
}
|
|
|
|
.ih-item.circle.effect {
|
|
margin: 0 auto;
|
|
-webkit-perspective: 900px;
|
|
-moz-perspective: 900px;
|
|
perspective: 900px;
|
|
}
|
|
.ih-item.circle.effect .img {
|
|
z-index: 11;
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
.ih-item.circle.effect .info {
|
|
-webkit-transform-style: preserve-3d;
|
|
-moz-transform-style: preserve-3d;
|
|
-ms-transform-style: preserve-3d;
|
|
-o-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.ih-item.circle.effect .info .info-back {
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #333333;
|
|
}
|
|
|
|
.ih-item.circle.effect .info h2 {
|
|
color: #fff;
|
|
position: relative;
|
|
font-size: 18px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
height: 35px;
|
|
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.ih-item.circle.effect .info p {
|
|
color: #bbb;
|
|
padding: 0px 0px 0px 0px;
|
|
font-style: italic;
|
|
padding-left: 0px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.ih-item.circle.effect.bottom_to_top .img {
|
|
-webkit-transform-origin: 50% 0;
|
|
-moz-transform-origin: 50% 0;
|
|
-ms-transform-origin: 50% 0;
|
|
-o-transform-origin: 50% 0;
|
|
transform-origin: 50% 0;
|
|
}
|
|
|
|
.ih-item.circle.effect.bottom_to_top a:hover .img {
|
|
-webkit-transform: rotate3d(1, 0, 0, 180deg);
|
|
-moz-transform: rotate3d(1, 0, 0, 180deg);
|
|
-ms-transform: rotate3d(1, 0, 0, 180deg);
|
|
-o-transform: rotate3d(1, 0, 0, 180deg);
|
|
transform: rotate3d(1, 0, 0, 180deg);
|
|
}
|
|
|
|
.ih-item.circle.effect.top_to_bottom .img {
|
|
-webkit-transform-origin: 50% 100%;
|
|
-moz-transform-origin: 50% 100%;
|
|
-ms-transform-origin: 50% 100%;
|
|
-o-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.ih-item.circle.effect.top_to_bottom a:hover .img {
|
|
-webkit-transform: rotate3d(1, 0, 0, -180deg);
|
|
-moz-transform: rotate3d(1, 0, 0, -180deg);
|
|
-ms-transform: rotate3d(1, 0, 0, -180deg);
|
|
-o-transform: rotate3d(1, 0, 0, -180deg);
|
|
transform: rotate3d(1, 0, 0, -180deg);
|
|
}
|
|
|
|
.ih-item.circle.effect.left_to_right .img {
|
|
-webkit-transform-origin: 100% 50%;
|
|
-moz-transform-origin: 100% 50%;
|
|
-ms-transform-origin: 100% 50%;
|
|
-o-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
}
|
|
|
|
.ih-item.circle.effect.left_to_right a:hover .img {
|
|
-webkit-transform: rotate3d(0, 1, 0, 180deg);
|
|
-moz-transform: rotate3d(0, 1, 0, 180deg);
|
|
-ms-transform: rotate3d(0, 1, 0, 180deg);
|
|
-o-transform: rotate3d(0, 1, 0, 180deg);
|
|
transform: rotate3d(0, 1, 0, 180deg);
|
|
}
|
|
|
|
.ih-item.circle.effect.right_to_left .img {
|
|
-webkit-transform-origin: 0% 50%;
|
|
-moz-transform-origin: 0% 50%;
|
|
-ms-transform-origin: 0% 50%;
|
|
-o-transform-origin: 0% 50%;
|
|
transform-origin: 0% 50%;
|
|
}
|
|
|
|
.ih-item.circle.effect.right_to_left a:hover .img {
|
|
-webkit-transform: rotate3d(0, 1, 0, -180deg);
|
|
-moz-transform: rotate3d(0, 1, 0, -180deg);
|
|
-ms-transform: rotate3d(0, 1, 0, -180deg);
|
|
-o-transform: rotate3d(0, 1, 0, -180deg);
|
|
transform: rotate3d(0, 1, 0, -180deg);
|
|
}
|
|
|
|
.ih-item a {
|
|
color: #333;
|
|
}
|
|
|
|
.ih-item a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ih-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ih-item.circle {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ih-item.circle .img {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
}
|
|
.ih-item.circle .img:before {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
-webkit-transition: all 0.35s ease-in-out;
|
|
-moz-transition: all 0.35s ease-in-out;
|
|
transition: all 0.35s ease-in-out;
|
|
}
|
|
|
|
.ih-item.circle .img img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ih-item.circle .info {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
@media all and (max-width: 780px) {
|
|
.ih-item.circle .img {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
/*margin-top: 20px;*/
|
|
border-radius: 50%;
|
|
}
|
|
.ih-item.circle {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
.ih-item.circle .info .info-back h2{
|
|
font-size: 0.9em;
|
|
}
|
|
.panel-title {
|
|
margin-bottom: 0.1em !important;
|
|
font-size: 2em !important;
|
|
}
|
|
.panel-subtitle {
|
|
font-size: 1em !important;
|
|
}
|
|
}
|
|
/**************抖动效果******************/
|
|
.profilepic {
|
|
text-align: center;
|
|
display: block;
|
|
-webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0px 2px 20px 3px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0px 2px 20px 3px rgba(0, 0, 0, 0.25);
|
|
border-radius: 300px;
|
|
width: 128px;
|
|
height: 128px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #88acdb;
|
|
transition: all 0.2s ease-in;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-pack: center;
|
|
-webkit-box-align: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.animated {
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-ms-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-ms-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
.animated.hinge {
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-ms-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
@-webkit-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flash {
|
|
-webkit-animation-name: flash;
|
|
-moz-animation-name: flash;
|
|
-o-animation-name: flash;
|
|
animation-name: flash;
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-moz-transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-moz-transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-o-transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-o-transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
.shake {
|
|
-webkit-animation-name: shake;
|
|
-moz-animation-name: shake;
|
|
-o-animation-name: shake;
|
|
animation-name: shake;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
-moz-transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
-o-transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
-o-transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
.bounce {
|
|
-webkit-animation-name: bounce;
|
|
-moz-animation-name: bounce;
|
|
-o-animation-name: bounce;
|
|
animation-name: bounce;
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes tada {
|
|
0% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-moz-transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-moz-transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-moz-transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes tada {
|
|
0% {
|
|
-o-transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
-o-transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
-o-transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
-o-transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
.tada {
|
|
-webkit-animation-name: tada;
|
|
-moz-animation-name: tada;
|
|
-o-animation-name: tada;
|
|
animation-name: tada;
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80%,
|
|
100% {
|
|
-webkit-transform-origin: top center;
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes swing {
|
|
20% {
|
|
-moz-transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
-moz-transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes swing {
|
|
20% {
|
|
-o-transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
-o-transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
-o-transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.swing {
|
|
-webkit-transform-origin: top center;
|
|
-moz-transform-origin: top center;
|
|
-o-transform-origin: top center;
|
|
transform-origin: top center;
|
|
-webkit-animation-name: swing;
|
|
-moz-animation-name: swing;
|
|
-o-animation-name: swing;
|
|
animation-name: swing;
|
|
}
|
|
|
|
@-webkit-keyframes wobble {
|
|
0% {
|
|
-webkit-transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes wobble {
|
|
0% {
|
|
-moz-transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
-moz-transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
-moz-transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
-moz-transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
-moz-transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
-moz-transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes wobble {
|
|
0% {
|
|
-o-transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
-o-transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
-o-transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
-o-transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
-o-transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
-o-transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
.wobble {
|
|
-webkit-animation-name: wobble;
|
|
-moz-animation-name: wobble;
|
|
-o-animation-name: wobble;
|
|
animation-name: wobble;
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes pulse {
|
|
0% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-moz-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes pulse {
|
|
0% {
|
|
-o-transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-o-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
-webkit-animation-name: pulse;
|
|
-moz-animation-name: pulse;
|
|
-o-animation-name: pulse;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
@-webkit-keyframes flip {
|
|
0% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
-webkit-animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
-webkit-animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
-webkit-animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flip {
|
|
0% {
|
|
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
-moz-animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
-moz-animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
-moz-animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
-moz-animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
-moz-animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flip {
|
|
0% {
|
|
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
-o-animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
-o-animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
-o-animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
-o-animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
-o-animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
.animated.flip {
|
|
-webkit-backface-visibility: visible !important;
|
|
-webkit-animation-name: flip;
|
|
-moz-backface-visibility: visible !important;
|
|
-moz-animation-name: flip;
|
|
-o-backface-visibility: visible !important;
|
|
-o-animation-name: flip;
|
|
backface-visibility: visible !important;
|
|
animation-name: flip;
|
|
}
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipInX {
|
|
0% {
|
|
-moz-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-moz-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipInX {
|
|
0% {
|
|
-o-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-o-transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-o-transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.flipInX {
|
|
-webkit-backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInX;
|
|
-moz-backface-visibility: visible !important;
|
|
-moz-animation-name: flipInX;
|
|
-o-backface-visibility: visible !important;
|
|
-o-animation-name: flipInX;
|
|
backface-visibility: visible !important;
|
|
animation-name: flipInX;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipOutX {
|
|
0% {
|
|
-moz-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipOutX {
|
|
0% {
|
|
-o-transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutX {
|
|
-webkit-animation-name: flipOutX;
|
|
-webkit-backface-visibility: visible !important;
|
|
-moz-animation-name: flipOutX;
|
|
-moz-backface-visibility: visible !important;
|
|
-o-animation-name: flipOutX;
|
|
-o-backface-visibility: visible !important;
|
|
animation-name: flipOutX;
|
|
backface-visibility: visible !important;
|
|
}
|
|
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipInY {
|
|
0% {
|
|
-moz-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-moz-transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipInY {
|
|
0% {
|
|
-o-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-o-transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
-o-transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.flipInY {
|
|
-webkit-backface-visibility: visible !important;
|
|
-webkit-animation-name: flipInY;
|
|
-moz-backface-visibility: visible !important;
|
|
-moz-animation-name: flipInY;
|
|
-o-backface-visibility: visible !important;
|
|
-o-animation-name: flipInY;
|
|
backface-visibility: visible !important;
|
|
animation-name: flipInY;
|
|
}
|
|
|
|
@-webkit-keyframes flipOutY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipOutY {
|
|
0% {
|
|
-moz-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipOutY {
|
|
0% {
|
|
-o-transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.flipOutY {
|
|
-webkit-backface-visibility: visible !important;
|
|
-webkit-animation-name: flipOutY;
|
|
-moz-backface-visibility: visible !important;
|
|
-moz-animation-name: flipOutY;
|
|
-o-backface-visibility: visible !important;
|
|
-o-animation-name: flipOutY;
|
|
backface-visibility: visible !important;
|
|
animation-name: flipOutY;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
-moz-animation-name: fadeIn;
|
|
-o-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUp {
|
|
-webkit-animation-name: fadeInUp;
|
|
-moz-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
-moz-animation-name: fadeInDown;
|
|
-o-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeft {
|
|
-webkit-animation-name: fadeInLeft;
|
|
-moz-animation-name: fadeInLeft;
|
|
-o-animation-name: fadeInLeft;
|
|
animation-name: fadeInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRight {
|
|
-webkit-animation-name: fadeInRight;
|
|
-moz-animation-name: fadeInRight;
|
|
-o-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInUpBig {
|
|
-webkit-animation-name: fadeInUpBig;
|
|
-moz-animation-name: fadeInUpBig;
|
|
-o-animation-name: fadeInUpBig;
|
|
animation-name: fadeInUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fadeInDownBig {
|
|
-webkit-animation-name: fadeInDownBig;
|
|
-moz-animation-name: fadeInDownBig;
|
|
-o-animation-name: fadeInDownBig;
|
|
animation-name: fadeInDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInLeftBig {
|
|
-webkit-animation-name: fadeInLeftBig;
|
|
-moz-animation-name: fadeInLeftBig;
|
|
-o-animation-name: fadeInLeftBig;
|
|
animation-name: fadeInLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.fadeInRightBig {
|
|
-webkit-animation-name: fadeInRightBig;
|
|
-moz-animation-name: fadeInRightBig;
|
|
-o-animation-name: fadeInRightBig;
|
|
animation-name: fadeInRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
-moz-animation-name: fadeOut;
|
|
-o-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUp {
|
|
-webkit-animation-name: fadeOutUp;
|
|
-moz-animation-name: fadeOutUp;
|
|
-o-animation-name: fadeOutUp;
|
|
animation-name: fadeOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDown {
|
|
-webkit-animation-name: fadeOutDown;
|
|
-moz-animation-name: fadeOutDown;
|
|
-o-animation-name: fadeOutDown;
|
|
animation-name: fadeOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeft {
|
|
-webkit-animation-name: fadeOutLeft;
|
|
-moz-animation-name: fadeOutLeft;
|
|
-o-animation-name: fadeOutLeft;
|
|
animation-name: fadeOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRight {
|
|
-webkit-animation-name: fadeOutRight;
|
|
-moz-animation-name: fadeOutRight;
|
|
-o-animation-name: fadeOutRight;
|
|
animation-name: fadeOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutUpBig {
|
|
-webkit-animation-name: fadeOutUpBig;
|
|
-moz-animation-name: fadeOutUpBig;
|
|
-o-animation-name: fadeOutUpBig;
|
|
animation-name: fadeOutUpBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutDownBig {
|
|
-webkit-animation-name: fadeOutDownBig;
|
|
-moz-animation-name: fadeOutDownBig;
|
|
-o-animation-name: fadeOutDownBig;
|
|
animation-name: fadeOutDownBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutLeftBig {
|
|
-webkit-animation-name: fadeOutLeftBig;
|
|
-moz-animation-name: fadeOutLeftBig;
|
|
-o-animation-name: fadeOutLeftBig;
|
|
animation-name: fadeOutLeftBig;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.fadeOutRightBig {
|
|
-webkit-animation-name: fadeOutRightBig;
|
|
-moz-animation-name: fadeOutRightBig;
|
|
-o-animation-name: fadeOutRightBig;
|
|
animation-name: fadeOutRightBig;
|
|
}
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slideInDown {
|
|
-webkit-animation-name: slideInDown;
|
|
-moz-animation-name: slideInDown;
|
|
-o-animation-name: slideInDown;
|
|
animation-name: slideInDown;
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slideInLeft {
|
|
-webkit-animation-name: slideInLeft;
|
|
-moz-animation-name: slideInLeft;
|
|
-o-animation-name: slideInLeft;
|
|
animation-name: slideInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
-moz-animation-name: slideInRight;
|
|
-o-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutUp {
|
|
0% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutUp {
|
|
0% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutUp {
|
|
-webkit-animation-name: slideOutUp;
|
|
-moz-animation-name: slideOutUp;
|
|
-o-animation-name: slideOutUp;
|
|
animation-name: slideOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutLeft {
|
|
0% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutLeft {
|
|
0% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutLeft {
|
|
-webkit-animation-name: slideOutLeft;
|
|
-moz-animation-name: slideOutLeft;
|
|
-o-animation-name: slideOutLeft;
|
|
animation-name: slideOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutRight {
|
|
0% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutRight {
|
|
0% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.slideOutRight {
|
|
-webkit-animation-name: slideOutRight;
|
|
-moz-animation-name: slideOutRight;
|
|
-o-animation-name: slideOutRight;
|
|
animation-name: slideOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-webkit-transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-moz-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-moz-transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-o-transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
-o-transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
-moz-animation-name: bounceIn;
|
|
-o-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.bounceInUp {
|
|
-webkit-animation-name: bounceInUp;
|
|
-moz-animation-name: bounceInUp;
|
|
-o-animation-name: bounceInUp;
|
|
animation-name: bounceInUp;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.bounceInDown {
|
|
-webkit-animation-name: bounceInDown;
|
|
-moz-animation-name: bounceInDown;
|
|
-o-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bounceInLeft {
|
|
-webkit-animation-name: bounceInLeft;
|
|
-moz-animation-name: bounceInLeft;
|
|
-o-animation-name: bounceInLeft;
|
|
animation-name: bounceInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bounceInRight {
|
|
-webkit-animation-name: bounceInRight;
|
|
-moz-animation-name: bounceInRight;
|
|
-o-animation-name: bounceInRight;
|
|
animation-name: bounceInRight;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOut {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOut {
|
|
0% {
|
|
-moz-transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
-moz-transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-moz-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOut {
|
|
0% {
|
|
-o-transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
-o-transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-o-transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
.bounceOut {
|
|
-webkit-animation-name: bounceOut;
|
|
-moz-animation-name: bounceOut;
|
|
-o-animation-name: bounceOut;
|
|
animation-name: bounceOut;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutUp {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutUp {
|
|
0% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutUp {
|
|
0% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-o-transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutUp {
|
|
-webkit-animation-name: bounceOutUp;
|
|
-moz-animation-name: bounceOutUp;
|
|
-o-animation-name: bounceOutUp;
|
|
animation-name: bounceOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutDown {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutDown {
|
|
0% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutDown {
|
|
0% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-o-transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutDown {
|
|
-webkit-animation-name: bounceOutDown;
|
|
-moz-animation-name: bounceOutDown;
|
|
-o-animation-name: bounceOutDown;
|
|
animation-name: bounceOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutLeft {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutLeft {
|
|
0% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutLeft {
|
|
0% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-o-transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutLeft {
|
|
-webkit-animation-name: bounceOutLeft;
|
|
-moz-animation-name: bounceOutLeft;
|
|
-o-animation-name: bounceOutLeft;
|
|
animation-name: bounceOutLeft;
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutRight {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutRight {
|
|
0% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutRight {
|
|
0% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
-o-transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
.bounceOutRight {
|
|
-webkit-animation-name: bounceOutRight;
|
|
-moz-animation-name: bounceOutRight;
|
|
-o-animation-name: bounceOutRight;
|
|
animation-name: bounceOutRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateIn {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
-webkit-transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateIn {
|
|
0% {
|
|
-moz-transform-origin: center center;
|
|
-moz-transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: center center;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateIn {
|
|
0% {
|
|
-o-transform-origin: center center;
|
|
-o-transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: center center;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateIn {
|
|
-webkit-animation-name: rotateIn;
|
|
-moz-animation-name: rotateIn;
|
|
-o-animation-name: rotateIn;
|
|
animation-name: rotateIn;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpLeft {
|
|
-webkit-animation-name: rotateInUpLeft;
|
|
-moz-animation-name: rotateInUpLeft;
|
|
-o-animation-name: rotateInUpLeft;
|
|
animation-name: rotateInUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownLeft {
|
|
-webkit-animation-name: rotateInDownLeft;
|
|
-moz-animation-name: rotateInDownLeft;
|
|
-o-animation-name: rotateInDownLeft;
|
|
animation-name: rotateInDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInUpRight {
|
|
-webkit-animation-name: rotateInUpRight;
|
|
-moz-animation-name: rotateInUpRight;
|
|
-o-animation-name: rotateInUpRight;
|
|
animation-name: rotateInUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotateInDownRight {
|
|
-webkit-animation-name: rotateInDownRight;
|
|
-moz-animation-name: rotateInDownRight;
|
|
-o-animation-name: rotateInDownRight;
|
|
animation-name: rotateInDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOut {
|
|
0% {
|
|
-webkit-transform-origin: center center;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: center center;
|
|
-webkit-transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOut {
|
|
0% {
|
|
-moz-transform-origin: center center;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: center center;
|
|
-moz-transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOut {
|
|
0% {
|
|
-o-transform-origin: center center;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: center center;
|
|
-o-transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOut {
|
|
-webkit-animation-name: rotateOut;
|
|
-moz-animation-name: rotateOut;
|
|
-o-animation-name: rotateOut;
|
|
animation-name: rotateOut;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutUpLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutUpLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpLeft {
|
|
-webkit-animation-name: rotateOutUpLeft;
|
|
-moz-animation-name: rotateOutUpLeft;
|
|
-o-animation-name: rotateOutUpLeft;
|
|
animation-name: rotateOutUpLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownLeft {
|
|
0% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: left bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutDownLeft {
|
|
0% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: left bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutDownLeft {
|
|
0% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: left bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownLeft {
|
|
-webkit-animation-name: rotateOutDownLeft;
|
|
-moz-animation-name: rotateOutDownLeft;
|
|
-o-animation-name: rotateOutDownLeft;
|
|
animation-name: rotateOutDownLeft;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutUpRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutUpRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutUpRight {
|
|
-webkit-animation-name: rotateOutUpRight;
|
|
-moz-animation-name: rotateOutUpRight;
|
|
-o-animation-name: rotateOutUpRight;
|
|
animation-name: rotateOutUpRight;
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownRight {
|
|
0% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-origin: right bottom;
|
|
-webkit-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutDownRight {
|
|
0% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform-origin: right bottom;
|
|
-moz-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutDownRight {
|
|
0% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform-origin: right bottom;
|
|
-o-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.rotateOutDownRight {
|
|
-webkit-animation-name: rotateOutDownRight;
|
|
-moz-animation-name: rotateOutDownRight;
|
|
-o-animation-name: rotateOutDownRight;
|
|
animation-name: rotateOutDownRight;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedIn {
|
|
0% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedIn {
|
|
0% {
|
|
-moz-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-moz-transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes lightSpeedIn {
|
|
0% {
|
|
-o-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
-o-transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.lightSpeedIn {
|
|
-webkit-animation-name: lightSpeedIn;
|
|
-moz-animation-name: lightSpeedIn;
|
|
-o-animation-name: lightSpeedIn;
|
|
animation-name: lightSpeedIn;
|
|
-webkit-animation-timing-function: ease-out;
|
|
-moz-animation-timing-function: ease-out;
|
|
-o-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedOut {
|
|
0% {
|
|
-webkit-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedOut {
|
|
0% {
|
|
-moz-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes lightSpeedOut {
|
|
0% {
|
|
-o-transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.lightSpeedOut {
|
|
-webkit-animation-name: lightSpeedOut;
|
|
-moz-animation-name: lightSpeedOut;
|
|
-o-animation-name: lightSpeedOut;
|
|
animation-name: lightSpeedOut;
|
|
-webkit-animation-timing-function: ease-in;
|
|
-moz-animation-timing-function: ease-in;
|
|
-o-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
@-webkit-keyframes hinge {
|
|
0% {
|
|
-webkit-transform: rotate(0);
|
|
-webkit-transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-webkit-transform: rotate(80deg);
|
|
-webkit-transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: rotate(60deg);
|
|
-webkit-transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
-webkit-transform-origin: top left;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes hinge {
|
|
0% {
|
|
-moz-transform: rotate(0);
|
|
-moz-transform-origin: top left;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-moz-transform: rotate(80deg);
|
|
-moz-transform-origin: top left;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
-moz-transform: rotate(60deg);
|
|
-moz-transform-origin: top left;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
-moz-transform-origin: top left;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes hinge {
|
|
0% {
|
|
-o-transform: rotate(0);
|
|
-o-transform-origin: top left;
|
|
-o-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
-o-transform: rotate(80deg);
|
|
-o-transform-origin: top left;
|
|
-o-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
-o-transform: rotate(60deg);
|
|
-o-transform-origin: top left;
|
|
-o-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
-o-transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
-o-transform-origin: top left;
|
|
-o-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hinge {
|
|
-webkit-animation-name: hinge;
|
|
-moz-animation-name: hinge;
|
|
-o-animation-name: hinge;
|
|
animation-name: hinge;
|
|
}
|
|
|
|
@-webkit-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.rollIn {
|
|
-webkit-animation-name: rollIn;
|
|
-moz-animation-name: rollIn;
|
|
-o-animation-name: rollIn;
|
|
animation-name: rollIn;
|
|
}
|
|
|
|
@-webkit-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
-moz-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
-o-transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-o-transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
.rollOut {
|
|
-webkit-animation-name: rollOut;
|
|
-moz-animation-name: rollOut;
|
|
-o-animation-name: rollOut;
|
|
animation-name: rollOut;
|
|
}
|
|
|
|
@-moz-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flash {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%,
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes tada {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes tada {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tada {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%,
|
|
20% {
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70%,
|
|
90% {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%,
|
|
60%,
|
|
80% {
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes swing {
|
|
20% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
20% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes swing {
|
|
20% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
20% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes wobble {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes wobble {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes wobble {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes wobble {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
15% {
|
|
transform: translateX(-25%) rotate(-5deg);
|
|
}
|
|
|
|
30% {
|
|
transform: translateX(20%) rotate(3deg);
|
|
}
|
|
|
|
45% {
|
|
transform: translateX(-15%) rotate(-3deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(10%) rotate(2deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-5%) rotate(-1deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flip {
|
|
0% {
|
|
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flip {
|
|
0% {
|
|
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flip {
|
|
0% {
|
|
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@keyframes flip {
|
|
0% {
|
|
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
50% {
|
|
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
80% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateX(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipOutX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flipOutX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipOutX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutX {
|
|
0% {
|
|
transform: perspective(400px) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipInY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipInY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipInY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
}
|
|
|
|
70% {
|
|
transform: perspective(400px) rotateY(10deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes flipOutY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flipOutY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes flipOutY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes flipOutY {
|
|
0% {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUpBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDownBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeftBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRightBig {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUp {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDown {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUpBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDownBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutLeftBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutRightBig {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutUp {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounceOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceOutRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateIn {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateIn {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateIn {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateIn {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(-200deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateInUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateInDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateInDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateInDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateInDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOut {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateOut {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOut {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOut {
|
|
0% {
|
|
transform-origin: center center;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: center center;
|
|
transform: rotate(200deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-transform-origin: left bottom;
|
|
-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-transform-origin: left bottom;
|
|
-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-transform-origin: left bottom;
|
|
-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-transform-origin: left bottom;
|
|
-transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownLeft {
|
|
0% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: left bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutUpRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotateOutDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rotateOutDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rotateOutDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOutDownRight {
|
|
0% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform-origin: right bottom;
|
|
transform: rotate(-90deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedIn {
|
|
0% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedIn {
|
|
0% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes lightSpeedIn {
|
|
0% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedIn {
|
|
0% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-20%) skewX(30deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(0%) skewX(-15deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes lightSpeedOut {
|
|
0% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes lightSpeedOut {
|
|
0% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes lightSpeedOut {
|
|
0% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes lightSpeedOut {
|
|
0% {
|
|
transform: translateX(0%) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%) skewX(-30deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes hinge {
|
|
0% {
|
|
transform: rotate(0);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
transform: rotate(80deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(60deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes hinge {
|
|
0% {
|
|
transform: rotate(0);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
transform: rotate(80deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(60deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes hinge {
|
|
0% {
|
|
transform: rotate(0);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
transform: rotate(80deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(60deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes hinge {
|
|
0% {
|
|
transform: rotate(0);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
20%,
|
|
60% {
|
|
transform: rotate(80deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(60deg);
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(60deg) translateY(0);
|
|
opacity: 1;
|
|
transform-origin: top left;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(700px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%) rotate(-120deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rollOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0px) rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) rotate(120deg);
|
|
}
|
|
}
|
|
|
|
.article-entry pre,
|
|
.article-entry .highlight {
|
|
background: #2d2d2d;
|
|
/*margin: 0 article-padding * -1*/
|
|
padding: 15px 20px;
|
|
border-style: solid;
|
|
border-color: #ddd;
|
|
border-width: 1px 0;
|
|
overflow: auto;
|
|
color: #ccc;
|
|
line-height: 22.400000000000002px;
|
|
}
|
|
|
|
.article-entry .highlight .gutter pre,
|
|
.article-entry .gist .gist-file .gist-data .line-numbers {
|
|
color: #666;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.article-entry pre,
|
|
.article-entry code {
|
|
font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.article-entry code {
|
|
background: #eee;
|
|
text-shadow: 0 1px #fff;
|
|
padding: 0 0.3em;
|
|
}
|
|
|
|
.article-entry pre code {
|
|
background: none;
|
|
text-shadow: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.article-entry .highlight pre {
|
|
border: none;
|
|
margin: 10;
|
|
padding: 0;
|
|
}
|
|
|
|
.article-entry .highlight table {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.article-entry .highlight td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.article-entry .highlight figcaption {
|
|
font-size: 0.85em;
|
|
color: #999;
|
|
line-height: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.article-entry .highlight figcaption a {
|
|
float: right;
|
|
}
|
|
|
|
.article-entry .highlight .gutter pre {
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.article-entry .highlight .line {
|
|
height: 22.400000000000002px;
|
|
}
|
|
|
|
.article-entry .gist {
|
|
margin: 0 -20px;
|
|
border-style: solid;
|
|
border-color: #ddd;
|
|
border-width: 1px 0;
|
|
background: #2d2d2d;
|
|
padding: 15px 20px 15px 0;
|
|
}
|
|
|
|
.article-entry .gist .gist-file {
|
|
border: none;
|
|
font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
|
|
margin: 0;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-data {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-data .line-numbers {
|
|
background: none;
|
|
border: none;
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-data .line-data {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .highlight {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-meta {
|
|
background: #2d2d2d;
|
|
color: #999;
|
|
font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
text-shadow: 0 0;
|
|
padding: 0;
|
|
margin-top: 1em;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-meta a {
|
|
color: #258fb8;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.article-entry .gist .gist-file .gist-meta a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
pre .comment,
|
|
pre .title {
|
|
color: #999;
|
|
}
|
|
|
|
pre .variable,
|
|
pre .attribute,
|
|
pre .tag,
|
|
pre .regexp,
|
|
pre .ruby .constant,
|
|
pre .xml .tag .title,
|
|
pre .xml .pi,
|
|
pre .xml .doctype,
|
|
pre .html .doctype,
|
|
pre .css .id,
|
|
pre .css .class,
|
|
pre .css .pseudo {
|
|
color: #f2777a;
|
|
}
|
|
|
|
pre .number,
|
|
pre .preprocessor,
|
|
pre .built_in,
|
|
pre .literal,
|
|
pre .params,
|
|
pre .constant {
|
|
color: #f99157;
|
|
}
|
|
|
|
pre .class,
|
|
pre .ruby .class .title,
|
|
pre .css .rules .attribute {
|
|
color: #9c9;
|
|
}
|
|
|
|
pre .string,
|
|
pre .value,
|
|
pre .inheritance,
|
|
pre .header,
|
|
pre .ruby .symbol,
|
|
pre .xml .cdata {
|
|
color: #9c9;
|
|
}
|
|
|
|
pre .css .hexcolor {
|
|
color: #6cc;
|
|
}
|
|
|
|
pre .function,
|
|
pre .python .decorator,
|
|
pre .python .title,
|
|
pre .ruby .function .title,
|
|
pre .ruby .title .keyword,
|
|
pre .perl .sub,
|
|
pre .javascript .title,
|
|
pre .coffeescript .title {
|
|
color: #69c;
|
|
}
|
|
|
|
pre .keyword,
|
|
pre .javascript .function {
|
|
color: #c9c;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
span,
|
|
applet,
|
|
object,
|
|
iframe,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
blockquote,
|
|
pre,
|
|
a,
|
|
abbr,
|
|
acronym,
|
|
address,
|
|
big,
|
|
cite,
|
|
code,
|
|
del,
|
|
dfn,
|
|
em,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
q,
|
|
s,
|
|
samp,
|
|
small,
|
|
strike,
|
|
strong,
|
|
sub,
|
|
sup,
|
|
tt,
|
|
var,
|
|
b,
|
|
u,
|
|
i,
|
|
center,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
ol,
|
|
ul,
|
|
li,
|
|
fieldset,
|
|
form,
|
|
label,
|
|
legend,
|
|
table,
|
|
caption,
|
|
tbody,
|
|
tfoot,
|
|
thead,
|
|
tr,
|
|
th,
|
|
td,
|
|
article,
|
|
aside,
|
|
canvas,
|
|
details,
|
|
embed,
|
|
figure,
|
|
figcaption,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
output,
|
|
ruby,
|
|
section,
|
|
summary,
|
|
time,
|
|
mark,
|
|
audio,
|
|
video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* HTML5 display-role reset for older browsers */
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
menu,
|
|
nav,
|
|
section {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
blockquote,
|
|
q {
|
|
quotes: none;
|
|
}
|
|
|
|
blockquote:before,
|
|
blockquote:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
q:before,
|
|
q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
figure table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
text-align: left;
|
|
border-width: 0px;
|
|
margin: auto;
|
|
}
|
|
|
|
figure th,
|
|
figure td {
|
|
padding: 0px;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
*zoom: 1;
|
|
}
|
|
|
|
body:before,
|
|
body:after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
|
|
body:after {
|
|
clear: both;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
font-size: 1em;
|
|
color: #666;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(37, 104, 163, 0.2);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: rgba(37, 104, 163, 0.2);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
font-weight: lighter;
|
|
color: #333;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 2.5em;
|
|
line-height: 1.2em;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1.3em;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 10px 20px;
|
|
margin: 0 0 20px;
|
|
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
font-weight: lighter;
|
|
font-size: 1em;
|
|
border-left: 3px solid #4e97d8;
|
|
}
|
|
|
|
blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin: 0 0 1.3em 2.5em;
|
|
}
|
|
|
|
ol li,
|
|
ul li {
|
|
margin: 0 0 0.2em 0;
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
ol ol,
|
|
ol ul,
|
|
ul ol,
|
|
ul ul {
|
|
margin: 0.1em 0 0.2em 2em;
|
|
}
|
|
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
code {
|
|
padding: 0.1em 0.4em;
|
|
background: #e8f2fb;
|
|
border: 1px solid #c9e1f6;
|
|
border-radius: 3px;
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
font-size: 0.9em;
|
|
vertical-align: bottom;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
pre {
|
|
margin-bottom: 1.3em;
|
|
padding: 1em 2.5%;
|
|
background: #e8f2fb;
|
|
border: 1px solid #c9e1f6;
|
|
border-radius: 3px;
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
line-height: 1.7em;
|
|
overflow: scroll;
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
table {
|
|
color: #333;
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
border-spacing: 0;
|
|
border: 2px solid #4e97d8;
|
|
width: 90%;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
thead tr:first-child {
|
|
background-color: #4e97d8;
|
|
color: #f8f8f8;
|
|
border: none;
|
|
}
|
|
|
|
th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0 8px 0 8px;
|
|
}
|
|
|
|
thead tr:last-child th {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
tbody tr:last-child td {
|
|
border: none;
|
|
}
|
|
|
|
tbody td {
|
|
border-bottom: 1px solid #ddd;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.date,
|
|
.time,
|
|
.author,
|
|
.tags {
|
|
font-size: 0.8em;
|
|
color: #c7c7c7;
|
|
}
|
|
|
|
.date a,
|
|
.time a,
|
|
.author a,
|
|
.tags a {
|
|
color: #666;
|
|
}
|
|
|
|
.date a:hover,
|
|
.time a:hover,
|
|
.author a:hover,
|
|
.tags a:hover {
|
|
color: #4e97d8;
|
|
}
|
|
|
|
.excerpt {
|
|
margin: 0;
|
|
font-size: 0.9em;
|
|
color: #999;
|
|
}
|
|
|
|
.intro {
|
|
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
font-size: 1.2em;
|
|
font-weight: lighter;
|
|
color: #999;
|
|
}
|
|
|
|
.block-heading {
|
|
display: inline;
|
|
float: left;
|
|
width: 940px;
|
|
margin: 0 10px;
|
|
position: relative;
|
|
bottom: -15px;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.label {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 8px 18px 9px 18px;
|
|
background: #4e97d8;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 500;
|
|
width: 940px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content-wrapper {
|
|
z-index: 800;
|
|
width: 70%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
.content-wrapper__inner {
|
|
margin: 0 10%;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.footer {
|
|
display: block;
|
|
padding: 2em 0 0 0;
|
|
border-top: 2px solid #ddd;
|
|
font-size: 0.7em;
|
|
color: #b3b3b3;
|
|
}
|
|
|
|
.footer__copyright {
|
|
display: block;
|
|
margin-bottom: 0.7em;
|
|
}
|
|
|
|
.footer__copyright a {
|
|
color: #a6a6a6;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footer__copyright a:hover {
|
|
color: #4e97d8;
|
|
}
|
|
|
|
.avatar,
|
|
|
|
.logo {
|
|
border-radius: 50%;
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
}
|
|
|
|
.section-title__divider {
|
|
width: 30%;
|
|
margin: 2.2em 0 2.1em 0;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.panel {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel__vertical {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.panel-title {
|
|
font-family: 'Old English Text MT', 'EngraversOldEnglishBT-Bold', 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
margin: 0 0 5px 0;
|
|
font-size: 2.5em;
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
font-size: 1.2em;
|
|
font-weight: lighter;
|
|
letter-spacing: 3px;
|
|
color: #ccc;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.iUp {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 80px, 0);
|
|
-moz-transform: translate3d(0, 80px, 0);
|
|
-ms-transform: translate3d(0, 80px, 0);
|
|
-o-transform: translate3d(0, 80px, 0);
|
|
transform: translate3d(0, 80px, 0);
|
|
-webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
|
|
-moz-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
|
|
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1)
|
|
}
|
|
|
|
.iUp.up {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
-o-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
.panel-cover {
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 900;
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 100%;
|
|
background: center center no-repeat #666;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
-o-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
-webkit-transition: width 0.6s ease;
|
|
-moz-transition: width 0.6s ease;
|
|
transition: width 0.6s ease
|
|
}
|
|
|
|
.panel-cover--collapsed {
|
|
width: 30%
|
|
}
|
|
|
|
.panel-cover--collapsed .iUp {
|
|
-webkit-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1);
|
|
-moz-transition: all 0 cubic-bezier(0.19, 1, 0.22, 1);
|
|
transition: all 0 cubic-bezier(0.19, 1, 0.22, 1)
|
|
}
|
|
|
|
.panel-cover--overlay {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #000;
|
|
z-index: 1;
|
|
-moz-opacity: .55;
|
|
opacity: .55;
|
|
}
|
|
|
|
.panel-cover__logo {
|
|
margin-bottom: 0.2em;
|
|
|
|
}
|
|
|
|
.panel-cover__description {
|
|
margin: 0 30px;
|
|
}
|
|
|
|
.panel-cover__divider {
|
|
width: 50%;
|
|
margin: 20px auto;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
.panel-cover__divider--secondary {
|
|
width: 15%;
|
|
}
|
|
|
|
.panel-main {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-main__inner {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
z-index: 800;
|
|
padding: 0 60px;
|
|
}
|
|
|
|
.panel-main__content {
|
|
max-width: 620px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.panel-main__content--fixed {
|
|
width: 480px;
|
|
transition: width 1s;
|
|
-webkit-transition: width 1s;
|
|
/* Safari */
|
|
}
|
|
|
|
.panel-inverted {
|
|
font-weight: 100;
|
|
text-align: center;
|
|
color: #fff;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.panel-inverted a {
|
|
color: #fff;
|
|
}
|
|
|
|
.cover-navigation {
|
|
margin-top: 42px;
|
|
}
|
|
|
|
.cover-navigation--social {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.btn,
|
|
.navigation__item a {
|
|
padding: 10px 20px;
|
|
border: 1px solid #4e97d8;
|
|
border-radius: 20px;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
text-shadow: none;
|
|
color: #4e97d8;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.btn:hover,
|
|
.navigation__item a:hover {
|
|
color: #4e97d8;
|
|
border-color: #4e97d8;
|
|
}
|
|
|
|
.btn-border-small {
|
|
border: 1px solid #4e97d8;
|
|
border-radius: 20px;
|
|
padding: 6px 8px;
|
|
font-size: 0.8em;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
border-color: #5ba4e5;
|
|
color: #5ba4e5;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
color: #217fd2;
|
|
border-color: #217fd2;
|
|
}
|
|
|
|
.btn-tertiary {
|
|
border-color: #999;
|
|
color: #999;
|
|
}
|
|
|
|
.btn-tertiary:hover {
|
|
color: #737373;
|
|
border-color: #737373;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 10px 24px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 8px 12px;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.btn-mobile-menu {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 35px;
|
|
background: rgba(51, 51, 51, 0.98);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-mobile-menu__icon,
|
|
.btn-mobile-close__icon {
|
|
position: relative;
|
|
top: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
nav {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.navigation {
|
|
display: inline-block;
|
|
/*float: left;*/
|
|
position: relative;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.navigation__item {
|
|
display: inline-block;
|
|
margin: 5px 1px 0 0;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.navigation__item a {
|
|
display: block;
|
|
position: relative;
|
|
border-color: #fff;
|
|
color: #fff;
|
|
opacity: 0.8;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.navigation__item a:hover {
|
|
color: #fff;
|
|
border-color: #fff;
|
|
opacity: 1;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.navigation--social a {
|
|
border: 0px;
|
|
padding: 6px 8px 6px 9px;
|
|
}
|
|
|
|
.navigation--social a .label {
|
|
display: none;
|
|
}
|
|
|
|
.navigation--social a .icon {
|
|
display: block;
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
.pagination {
|
|
display: block;
|
|
margin: 0 0 4em 0;
|
|
}
|
|
|
|
.pagination__page-number {
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
color: #999;
|
|
}
|
|
|
|
.pagination__newer {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.pagination__older {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
i {
|
|
font-family: 'entypo';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.social {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.icon-social {
|
|
font-family: 'entypo-social';
|
|
font-size: 22px;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@media all and (max-width: 1100px) {
|
|
/*
|
|
.panel-cover__logo {
|
|
width: 70px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.panel-cover__description {
|
|
margin: 0 10px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.navigation--social {
|
|
margin-top: 5px;
|
|
margin-left: 0;
|
|
}
|
|
*/
|
|
}
|
|
|
|
@media all and (max-width: 960px) {
|
|
/*
|
|
.btn-mobile-menu {
|
|
display: block;
|
|
}
|
|
|
|
.panel-main {
|
|
display: table;
|
|
position: relative;
|
|
}
|
|
|
|
.panel-cover--collapsed {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.panel-main__inner {
|
|
display: table-cell;
|
|
padding: 60px 10%;
|
|
}
|
|
|
|
.panel-cover__description {
|
|
display: block;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.panel-cover__divider--secondary {
|
|
display: none;
|
|
}
|
|
|
|
.panel-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-position: center center;
|
|
}
|
|
|
|
.panel-cover.panel-cover--collapsed {
|
|
display: block;
|
|
position: relative;
|
|
height: auto;
|
|
padding: 0;
|
|
background-position: center center;
|
|
}
|
|
|
|
.panel-cover.panel-cover--collapsed .panel-main__inner {
|
|
display: block;
|
|
padding: 70px 0 30px 0;
|
|
}
|
|
|
|
.panel-cover.panel-cover--collapsed .panel-cover__logo {
|
|
width: 60px;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.panel-cover.panel-cover--collapsed .panel-cover__description {
|
|
display: none;
|
|
}
|
|
|
|
.panel-cover.panel-cover--collapsed .panel-cover__divider {
|
|
display: none;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.navigation-wrapper {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 20px 0;
|
|
background: rgba(51, 51, 51, 0.98);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.navigation-wrapper.visible {
|
|
display: block;
|
|
}
|
|
|
|
.cover-navigation {
|
|
display: block;
|
|
position: relative;
|
|
float: left;
|
|
clear: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.cover-navigation .navigation {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.cover-navigation .navigation li {
|
|
width: 80%;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.cover-navigation.navigation--social {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.cover-navigation.navigation--social .navigation li {
|
|
display: inline-block;
|
|
width: 20%;
|
|
}
|
|
|
|
.content-wrapper {
|
|
width: 80%;
|
|
max-width: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content-wrapper__inner {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.navigation__item {
|
|
width: 100%;
|
|
margin: 0 0 0.4em 0;
|
|
}
|
|
*/
|
|
}
|
|
|
|
@media all and (max-width: 510px) {
|
|
.navigation {
|
|
line-height: 50px;
|
|
}
|
|
|
|
}
|
|
|
|
@media all and (max-width: 340px) {
|
|
.panel-main__inner {
|
|
padding: 0 5%;
|
|
}
|
|
|
|
.panel-title {
|
|
margin-bottom: 0.1em;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.btn,
|
|
.navigation__item a {
|
|
display: block;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
}
|
|
|
|
/***************************************************************************************/
|
|
.remark {
|
|
position: sticky;
|
|
z-index: 900;
|
|
bottom: 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
opacity: .60 !important;
|
|
padding-bottom: 3px;
|
|
background-color: black;
|
|
}
|
|
|
|
.power {
|
|
display: inline-block;
|
|
color: #fff !important;
|
|
letter-spacing: 0;
|
|
font-size: 10px;
|
|
line-height: 30px;
|
|
margin: 0 auto;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.beian {
|
|
position: absolute;
|
|
z-index: 900;
|
|
bottom: 0;
|
|
right: 5px;
|
|
text-align: center;
|
|
color: #fff;
|
|
opacity: .25 !important;
|
|
padding-bottom: 3px;
|
|
letter-spacing: -3px;
|
|
font-size: 0;
|
|
}
|
|
|
|
.gwab,
|
|
.icp {
|
|
display: inline-block;
|
|
color: #fff !important;
|
|
letter-spacing: 0;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.gwab {
|
|
background: url(/img/beian.png) no-repeat;
|
|
background-size: 12px 12px;
|
|
background-position: 3px 2px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
@-webkit-keyframes btnGroups {
|
|
0% {
|
|
-webkit-transform: scale(1.2, 0.8);
|
|
}
|
|
|
|
1% {
|
|
-webkit-transform: scale(1.18, 0.82);
|
|
}
|
|
|
|
2% {
|
|
-webkit-transform: scale(1.16, 0.84);
|
|
}
|
|
|
|
3% {
|
|
-webkit-transform: scale(1.13, 0.87);
|
|
}
|
|
|
|
4% {
|
|
-webkit-transform: scale(1.1, 0.9);
|
|
}
|
|
|
|
5% {
|
|
-webkit-transform: scale(1.07, 0.93);
|
|
}
|
|
|
|
6% {
|
|
-webkit-transform: scale(1.04, 0.96);
|
|
}
|
|
|
|
7% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
8% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
9% {
|
|
-webkit-transform: scale(0.97, 1.03);
|
|
}
|
|
|
|
10% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
11% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
12% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
13% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
14% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
16% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
17% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
18% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
19% {
|
|
-webkit-transform: scale(0.96, 1.04);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
21% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
22% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
|
|
23% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
|
|
24% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
26% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
27% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
28% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
29% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
31% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
32% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
33% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
34% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
36% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
37% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
|
|
39% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
41% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
42% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
43% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
44% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
46% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
47% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
48% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
49% {
|
|
-webkit-transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes btnGroups {
|
|
0% {
|
|
-webkit-transform: scale(1.2, 0.8);
|
|
-moz-transform: scale(1.2, 0.8);
|
|
-ms-transform: scale(1.2, 0.8);
|
|
transform: scale(1.2, 0.8);
|
|
}
|
|
|
|
1% {
|
|
-webkit-transform: scale(1.18, 0.82);
|
|
-moz-transform: scale(1.18, 0.82);
|
|
-ms-transform: scale(1.18, 0.82);
|
|
transform: scale(1.18, 0.82);
|
|
}
|
|
|
|
2% {
|
|
-webkit-transform: scale(1.16, 0.84);
|
|
-moz-transform: scale(1.16, 0.84);
|
|
-ms-transform: scale(1.16, 0.84);
|
|
transform: scale(1.16, 0.84);
|
|
}
|
|
|
|
3% {
|
|
-webkit-transform: scale(1.13, 0.87);
|
|
-moz-transform: scale(1.13, 0.87);
|
|
-ms-transform: scale(1.13, 0.87);
|
|
transform: scale(1.13, 0.87);
|
|
}
|
|
|
|
4% {
|
|
-webkit-transform: scale(1.1, 0.9);
|
|
-moz-transform: scale(1.1, 0.9);
|
|
-ms-transform: scale(1.1, 0.9);
|
|
transform: scale(1.1, 0.9);
|
|
}
|
|
|
|
5% {
|
|
-webkit-transform: scale(1.07, 0.93);
|
|
-moz-transform: scale(1.07, 0.93);
|
|
-ms-transform: scale(1.07, 0.93);
|
|
transform: scale(1.07, 0.93);
|
|
}
|
|
|
|
6% {
|
|
-webkit-transform: scale(1.04, 0.96);
|
|
-moz-transform: scale(1.04, 0.96);
|
|
-ms-transform: scale(1.04, 0.96);
|
|
transform: scale(1.04, 0.96);
|
|
}
|
|
|
|
7% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
8% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
9% {
|
|
-webkit-transform: scale(0.97, 1.03);
|
|
-moz-transform: scale(0.97, 1.03);
|
|
-ms-transform: scale(0.97, 1.03);
|
|
transform: scale(0.97, 1.03);
|
|
}
|
|
|
|
10% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
11% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
12% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
13% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
14% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
16% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
17% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
18% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
19% {
|
|
-webkit-transform: scale(0.96, 1.04);
|
|
-moz-transform: scale(0.96, 1.04);
|
|
-ms-transform: scale(0.96, 1.04);
|
|
transform: scale(0.96, 1.04);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale(0.98, 1.02);
|
|
-moz-transform: scale(0.98, 1.02);
|
|
-ms-transform: scale(0.98, 1.02);
|
|
transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
21% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
22% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
23% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
24% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
26% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
27% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
28% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
29% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
31% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
32% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
33% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
34% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
36% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
37% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
39% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
41% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
42% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
43% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
44% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
46% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
47% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
48% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
49% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes btnGroups {
|
|
0% {
|
|
-webkit-transform: scale(1.2, 0.8);
|
|
-moz-transform: scale(1.2, 0.8);
|
|
-ms-transform: scale(1.2, 0.8);
|
|
transform: scale(1.2, 0.8);
|
|
}
|
|
|
|
1% {
|
|
-webkit-transform: scale(1.18, 0.82);
|
|
-moz-transform: scale(1.18, 0.82);
|
|
-ms-transform: scale(1.18, 0.82);
|
|
transform: scale(1.18, 0.82);
|
|
}
|
|
|
|
2% {
|
|
-webkit-transform: scale(1.16, 0.84);
|
|
-moz-transform: scale(1.16, 0.84);
|
|
-ms-transform: scale(1.16, 0.84);
|
|
transform: scale(1.16, 0.84);
|
|
}
|
|
|
|
3% {
|
|
-webkit-transform: scale(1.13, 0.87);
|
|
-moz-transform: scale(1.13, 0.87);
|
|
-ms-transform: scale(1.13, 0.87);
|
|
transform: scale(1.13, 0.87);
|
|
}
|
|
|
|
4% {
|
|
-webkit-transform: scale(1.1, 0.9);
|
|
-moz-transform: scale(1.1, 0.9);
|
|
-ms-transform: scale(1.1, 0.9);
|
|
transform: scale(1.1, 0.9);
|
|
}
|
|
|
|
5% {
|
|
-webkit-transform: scale(1.07, 0.93);
|
|
-moz-transform: scale(1.07, 0.93);
|
|
-ms-transform: scale(1.07, 0.93);
|
|
transform: scale(1.07, 0.93);
|
|
}
|
|
|
|
6% {
|
|
-webkit-transform: scale(1.04, 0.96);
|
|
-moz-transform: scale(1.04, 0.96);
|
|
-ms-transform: scale(1.04, 0.96);
|
|
transform: scale(1.04, 0.96);
|
|
}
|
|
|
|
7% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
8% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
9% {
|
|
-webkit-transform: scale(0.97, 1.03);
|
|
-moz-transform: scale(0.97, 1.03);
|
|
-ms-transform: scale(0.97, 1.03);
|
|
transform: scale(0.97, 1.03);
|
|
}
|
|
|
|
10% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
11% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
12% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
13% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
14% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
16% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
17% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
18% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
19% {
|
|
-webkit-transform: scale(0.96, 1.04);
|
|
-moz-transform: scale(0.96, 1.04);
|
|
-ms-transform: scale(0.96, 1.04);
|
|
transform: scale(0.96, 1.04);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale(0.98, 1.02);
|
|
-moz-transform: scale(0.98, 1.02);
|
|
-ms-transform: scale(0.98, 1.02);
|
|
transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
21% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
22% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
23% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
24% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
26% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
27% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
28% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
29% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
31% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
32% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
33% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
34% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
36% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
37% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
39% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
41% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
42% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
43% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
44% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
46% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
47% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
48% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
49% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes btnGroups {
|
|
0% {
|
|
-webkit-transform: scale(1.2, 0.8);
|
|
-moz-transform: scale(1.2, 0.8);
|
|
-ms-transform: scale(1.2, 0.8);
|
|
transform: scale(1.2, 0.8);
|
|
}
|
|
|
|
1% {
|
|
-webkit-transform: scale(1.18, 0.82);
|
|
-moz-transform: scale(1.18, 0.82);
|
|
-ms-transform: scale(1.18, 0.82);
|
|
transform: scale(1.18, 0.82);
|
|
}
|
|
|
|
2% {
|
|
-webkit-transform: scale(1.16, 0.84);
|
|
-moz-transform: scale(1.16, 0.84);
|
|
-ms-transform: scale(1.16, 0.84);
|
|
transform: scale(1.16, 0.84);
|
|
}
|
|
|
|
3% {
|
|
-webkit-transform: scale(1.13, 0.87);
|
|
-moz-transform: scale(1.13, 0.87);
|
|
-ms-transform: scale(1.13, 0.87);
|
|
transform: scale(1.13, 0.87);
|
|
}
|
|
|
|
4% {
|
|
-webkit-transform: scale(1.1, 0.9);
|
|
-moz-transform: scale(1.1, 0.9);
|
|
-ms-transform: scale(1.1, 0.9);
|
|
transform: scale(1.1, 0.9);
|
|
}
|
|
|
|
5% {
|
|
-webkit-transform: scale(1.07, 0.93);
|
|
-moz-transform: scale(1.07, 0.93);
|
|
-ms-transform: scale(1.07, 0.93);
|
|
transform: scale(1.07, 0.93);
|
|
}
|
|
|
|
6% {
|
|
-webkit-transform: scale(1.04, 0.96);
|
|
-moz-transform: scale(1.04, 0.96);
|
|
-ms-transform: scale(1.04, 0.96);
|
|
transform: scale(1.04, 0.96);
|
|
}
|
|
|
|
7% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
8% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
9% {
|
|
-webkit-transform: scale(0.97, 1.03);
|
|
-moz-transform: scale(0.97, 1.03);
|
|
-ms-transform: scale(0.97, 1.03);
|
|
transform: scale(0.97, 1.03);
|
|
}
|
|
|
|
10% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
11% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
12% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
13% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
14% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
16% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
17% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
18% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
19% {
|
|
-webkit-transform: scale(0.96, 1.04);
|
|
-moz-transform: scale(0.96, 1.04);
|
|
-ms-transform: scale(0.96, 1.04);
|
|
transform: scale(0.96, 1.04);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale(0.98, 1.02);
|
|
-moz-transform: scale(0.98, 1.02);
|
|
-ms-transform: scale(0.98, 1.02);
|
|
transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
21% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
22% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
23% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
24% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
26% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
27% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
28% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
29% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
31% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
32% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
33% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
34% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
36% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
37% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
39% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
41% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
42% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
43% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
44% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
46% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
47% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
48% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
49% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes btnGroups {
|
|
0% {
|
|
-webkit-transform: scale(1.2, 0.8);
|
|
-moz-transform: scale(1.2, 0.8);
|
|
-ms-transform: scale(1.2, 0.8);
|
|
transform: scale(1.2, 0.8);
|
|
}
|
|
|
|
1% {
|
|
-webkit-transform: scale(1.18, 0.82);
|
|
-moz-transform: scale(1.18, 0.82);
|
|
-ms-transform: scale(1.18, 0.82);
|
|
transform: scale(1.18, 0.82);
|
|
}
|
|
|
|
2% {
|
|
-webkit-transform: scale(1.16, 0.84);
|
|
-moz-transform: scale(1.16, 0.84);
|
|
-ms-transform: scale(1.16, 0.84);
|
|
transform: scale(1.16, 0.84);
|
|
}
|
|
|
|
3% {
|
|
-webkit-transform: scale(1.13, 0.87);
|
|
-moz-transform: scale(1.13, 0.87);
|
|
-ms-transform: scale(1.13, 0.87);
|
|
transform: scale(1.13, 0.87);
|
|
}
|
|
|
|
4% {
|
|
-webkit-transform: scale(1.1, 0.9);
|
|
-moz-transform: scale(1.1, 0.9);
|
|
-ms-transform: scale(1.1, 0.9);
|
|
transform: scale(1.1, 0.9);
|
|
}
|
|
|
|
5% {
|
|
-webkit-transform: scale(1.07, 0.93);
|
|
-moz-transform: scale(1.07, 0.93);
|
|
-ms-transform: scale(1.07, 0.93);
|
|
transform: scale(1.07, 0.93);
|
|
}
|
|
|
|
6% {
|
|
-webkit-transform: scale(1.04, 0.96);
|
|
-moz-transform: scale(1.04, 0.96);
|
|
-ms-transform: scale(1.04, 0.96);
|
|
transform: scale(1.04, 0.96);
|
|
}
|
|
|
|
7% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
8% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
9% {
|
|
-webkit-transform: scale(0.97, 1.03);
|
|
-moz-transform: scale(0.97, 1.03);
|
|
-ms-transform: scale(0.97, 1.03);
|
|
transform: scale(0.97, 1.03);
|
|
}
|
|
|
|
10% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
11% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
12% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
13% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
14% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
15% {
|
|
-webkit-transform: scale(0.93, 1.07);
|
|
-moz-transform: scale(0.93, 1.07);
|
|
-ms-transform: scale(0.93, 1.07);
|
|
transform: scale(0.93, 1.07);
|
|
}
|
|
|
|
16% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
17% {
|
|
-webkit-transform: scale(0.94, 1.06);
|
|
-moz-transform: scale(0.94, 1.06);
|
|
-ms-transform: scale(0.94, 1.06);
|
|
transform: scale(0.94, 1.06);
|
|
}
|
|
|
|
18% {
|
|
-webkit-transform: scale(0.95, 1.05);
|
|
-moz-transform: scale(0.95, 1.05);
|
|
-ms-transform: scale(0.95, 1.05);
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
19% {
|
|
-webkit-transform: scale(0.96, 1.04);
|
|
-moz-transform: scale(0.96, 1.04);
|
|
-ms-transform: scale(0.96, 1.04);
|
|
transform: scale(0.96, 1.04);
|
|
}
|
|
|
|
20% {
|
|
-webkit-transform: scale(0.98, 1.02);
|
|
-moz-transform: scale(0.98, 1.02);
|
|
-ms-transform: scale(0.98, 1.02);
|
|
transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
21% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
22% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
23% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
24% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
26% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
27% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
28% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
29% {
|
|
-webkit-transform: scale(1.03, 0.97);
|
|
-moz-transform: scale(1.03, 0.97);
|
|
-ms-transform: scale(1.03, 0.97);
|
|
transform: scale(1.03, 0.97);
|
|
}
|
|
|
|
30% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
31% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
32% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
33% {
|
|
-webkit-transform: scale(1.02, 0.98);
|
|
-moz-transform: scale(1.02, 0.98);
|
|
-ms-transform: scale(1.02, 0.98);
|
|
transform: scale(1.02, 0.98);
|
|
}
|
|
|
|
34% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
36% {
|
|
-webkit-transform: scale(1.01, 0.99);
|
|
-moz-transform: scale(1.01, 0.99);
|
|
-ms-transform: scale(1.01, 0.99);
|
|
transform: scale(1.01, 0.99);
|
|
}
|
|
|
|
37% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
39% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
41% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
42% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
43% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
44% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
45% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
46% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
47% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
48% {
|
|
-webkit-transform: scale(0.99, 1.01);
|
|
-moz-transform: scale(0.99, 1.01);
|
|
-ms-transform: scale(0.99, 1.01);
|
|
transform: scale(0.99, 1.01);
|
|
}
|
|
|
|
49% {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
/*弹窗美化*/
|
|
/*.iziToast:after {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.iziToast {
|
|
border-radius: 5px !important;
|
|
}
|
|
*/
|
|
.iziToast-message.slideIn {
|
|
margin-top: 5px !important;
|
|
} |