Template:BIT-China/css/css-animation

.animated {

 animation-fill-mode: both;

} @keyframes gifA-move {

 from {
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

 40% {
   transform: translateY(-400px) scale(.2);
   -webkit-transform: translateY(-400px) scale(.2);
   -moz-transform: translateY(-400px) scale(.2);
   -ms-transform: translateY(-400px) scale(.2);
   -o-transform: translateY(-400px) scale(.2);
 }

 to {
   transform: translateY(-500px) scale(.1);
   -webkit-transform: translateY(-500px) scale(.1);
   -moz-transform: translateY(-500px) scale(.1);
   -ms-transform: translateY(-500px) scale(.1);
   -o-transform: translateY(-500px) scale(.1);
 }

}

.gifA-move {

 animation-name: gifA-move;
 animation-duration: 1.5s;

} @keyframes gifA-move-back {

 from {
   transform: translateY(-500px) scale(.1);
   -webkit-transform: translateY(-500px) scale(.1);
   -moz-transform: translateY(-500px) scale(.1);
   -ms-transform: translateY(-500px) scale(.1);
   -o-transform: translateY(-500px) scale(.1);
 }

 10% {
   transform: translateY(-400px) scale(.2);
   -webkit-transform: translateY(-400px) scale(.2);
   -moz-transform: translateY(-400px) scale(.2);
   -ms-transform: translateY(-400px) scale(.2);
   -o-transform: translateY(-400px) scale(.2);
 }

 to {
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

}

.gifA-move-back {

 animation-name: gifA-move-back;
 animation-duration: 1s;

} @keyframes imgA-nav-gradient {

 from {
   opacity: 0;
   transform: scale(0);
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
 }

 30% {
   opacity: 0;
   transform: scale(.4);
   -webkit-transform: scale(.4);
   -moz-transform: scale(.4);
   -ms-transform: scale(.4);
   -o-transform: scale(.4);
 }

 to {
   opacity: 1;
   transform: scale(1);
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
 }

}

.imgA-nav-gradient {

 animation-name: imgA-nav-gradient;
 animation-duration: 1.6s;

} @keyframes imgA-nav-gradient-back {

 from {
   opacity: 1;
   transform: scale(1);
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
 }

 20% {
   opacity: 0;
   transform: scale(.4);
   -webkit-transform: scale(.4);
   -moz-transform: scale(.4);
   -ms-transform: scale(.4);
   -o-transform: scale(.4);
 }

 to {
   opacity: 0;
   transform: scale(0);
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
 }

}

.imgA-nav-gradient-back {

 animation-name: imgA-nav-gradient-back;
 animation-duration: 1.6s;

} @keyframes right-move {

 from {
   opacity: 0;
   transform: translateX(500px);
   -webkit-transform: translateX(500px);
   -moz-transform: translateX(500px);
   -ms-transform: translateX(500px);
   -o-transform: translateX(500px);
 }

 to {
   opacity: 1;
   transform: translateX(0px);
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
 }

}

.right-move {

 animation-name: right-move;
 animation-duration: 1.6s;

} @keyframes right-move-back {

 from {
   opacity: 1;
   transform: translateX(0px);
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
 }

 to {
   opacity: 0;
   transform: translateX(500px);
   -webkit-transform: translateX(500px);
   -moz-transform: translateX(500px);
   -ms-transform: translateX(500px);
   -o-transform: translateX(500px);
 }

}

.right-move-back {

 animation-name: right-move-back;
 animation-duration: 1.6s;

} @keyframes table-rotate {

 from {
   opacity: 0;
   transform: rotate(0deg) scale(0);
   -webkit-transform: rotate(0deg) scale(0);
   -moz-transform: rotate(0deg) scale(0);
   -ms-transform: rotate(0deg) scale(0);
   -o-transform: rotate(0deg) scale(0);
 }

 to {
   opacity: 1;
   transform: rotate(721deg) scale(1);
   -webkit-transform: rotate(721deg) scale(1);
   -moz-transform: rotate(721deg) scale(1);
   -ms-transform: rotate(721deg) scale(1);
   -o-transform: rotate(721deg) scale(1);
 }

}

.table-rotate {

 animation-name: table-rotate;
 animation-duration: 1.6s;

} @keyframes table-rotate-back {

 from {
   opacity: 1;
   transform: rotate(721deg) scale(1);
   -webkit-transform: rotate(721deg) scale(1);
   -moz-transform: rotate(721deg) scale(1);
   -ms-transform: rotate(721deg) scale(1);
   -o-transform: rotate(721deg) scale(1);
 }

 to {
   opacity: 0;
   transform: rotate(0deg) scale(0);
   -webkit-transform: rotate(0deg) scale(0);
   -moz-transform: rotate(0deg) scale(0);
   -ms-transform: rotate(0deg) scale(0);
   -o-transform: rotate(0deg) scale(0);
 }

}

.table-rotate-back {

 animation-name: table-rotate-back;
 animation-duration: 1.6s;

} @keyframes left-come {

 from {
   opacity: 0;
   transform: translateX(-500px) scale(0);
   -webkit-transform: translateX(-500px) scale(0);
   -moz-transform: translateX(-500px) scale(0);
   -ms-transform: translateX(-500px) scale(0);
   -o-transform: translateX(-500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translateX(0) scale(1);
   -webkit-transform: translateX(0) scale(1);
   -moz-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
   -o-transform: translateX(0) scale(1);
 }

}

.left-come {

 animation-name: left-come;
 animation-duration: 1.6s;

} @keyframes left-come-back {

 from {
   opacity: 1;
   transform: translateX(0) scale(1);
   -webkit-transform: translateX(0) scale(1);
   -moz-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
   -o-transform: translateX(0) scale(1);
 }

 to {
   opacity: 0;
   transform: translateX(-500px) scale(0);
   -webkit-transform: translateX(-500px) scale(0);
   -moz-transform: translateX(-500px) scale(0);
   -ms-transform: translateX(-500px) scale(0);
   -o-transform: translateX(-500px) scale(0);
 }

}

.left-come-back {

 animation-name: left-come-back;
 animation-duration: 1.6s;

} @keyframes right-up-come {

 from {
   opacity: 0;
   transform: translate(500px,-500px) scale(0);
   -webkit-transform: translate(500px,-500px) scale(0);
   -moz-transform: translate(500px,-500px) scale(0);
   -ms-transform: translate(500px,-500px) scale(0);
   -o-transform: translate(500px,-500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translate(0,0) scale(1);
   -webkit-transform: translate(0,0) scale(1);
   -moz-transform: translate(0,0) scale(1);
   -ms-transform: translate(0,0) scale(1);
   -o-transform: translate(0,0) scale(1);
 }

}

.right-up-come {

 animation-name: right-up-come;
 animation-duration: 1.6s;

} @keyframes right-up-come-back {

 from {
   opacity: 1;
   transform: translate(0,0) scale(1);
   -webkit-transform: translate(0,0) scale(1);
   -moz-transform: translate(0,0) scale(1);
   -ms-transform: translate(0,0) scale(1);
   -o-transform: translate(0,0) scale(1);
 }

 to {
   opacity: 0;
   transform: translate(500px,-500px) scale(0);
   -webkit-transform: translate(500px,-500px) scale(0);
   -moz-transform: translate(500px,-500px) scale(0);
   -ms-transform: translate(500px,-500px) scale(0);
   -o-transform: translate(500px,-500px) scale(0);
 }

}

.right-up-come-back {

 animation-name: right-up-come-back;
 animation-duration: 1s;

} @keyframes up-come {

 from {
   opacity: 0;
   transform: translateY(500px) scale(0);
   -webkit-transform: translateY(500px) scale(0);
   -moz-transform: translateY(500px) scale(0);
   -ms-transform: translateY(500px) scale(0);
   -o-transform: translateY(500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

}

.up-come {

 animation-name: up-come;
 animation-duration: 1.6s;

} @keyframes up-come-back {

 from {
   opacity: 1;
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

 to {
   opacity: 0;
   transform: translateY(500px) scale(0);
   -webkit-transform: translateY(500px) scale(0);
   -moz-transform: translateY(500px) scale(0);
   -ms-transform: translateY(500px) scale(0);
   -o-transform: translateY(500px) scale(0);
 }

}

.up-come-back {

 animation-name: up-come-back;
 animation-duration: 1.6s;

} @keyframes bear-swing {

 from {
   opacity: 0;
   transform: scale(0) rotate(-50deg);
   -webkit-transform: scale(0) rotate(-50deg);
   -moz-transform: scale(0) rotate(-50deg);
   -ms-transform: scale(0) rotate(-50deg);
   -o-transform: scale(0) rotate(-50deg);
 }

 50% {
   opacity: .5;
   transform: scale(0.4) rotate(50deg);
   -webkit-transform: scale(0.4) rotate(50deg);
   -moz-transform: scale(0.4) rotate(50deg);
   -ms-transform: scale(0.4) rotate(50deg);
   -o-transform: scale(0.4) rotate(50deg);
 }

 to {
   opacity: 1;
   transform: scale(1) rotate(0deg);
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
 }

}

.bear-swing {

 animation-name: bear-swing;
 animation-duration: 1.6s;

} @keyframes bear-swing-back {

 from {
   opacity: 1;
   transform: scale(1) rotate(0deg);
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
 }

 50% {
   opacity: .5;
   transform: scale(0.4) rotate(50deg);
   -webkit-transform: scale(0.4) rotate(50deg);
   -moz-transform: scale(0.4) rotate(50deg);
   -ms-transform: scale(0.4) rotate(50deg);
   -o-transform: scale(0.4) rotate(50deg);
 }

 to {
   opacity: 0;
   transform: scale(0) rotate(-50deg);
   -webkit-transform: scale(0) rotate(-50deg);
   -moz-transform: scale(0) rotate(-50deg);
   -ms-transform: scale(0) rotate(-50deg);
   -o-transform: scale(0) rotate(-50deg);
 }

}

.bear-swing-back {

 animation-name: bear-swing-back;
 animation-duration: 1.6s;

} @keyframes team-up-Z {

 40% {
   transform: translateZ(800px);
   -webkit-transform: translateZ(800px);
   -moz-transform: translateZ(800px);
   -ms-transform: translateZ(800px);
   -o-transform: translateZ(800px);
 }

} @keyframes team-up-Y {

 to {
   transform: translateY(-800px);
   -webkit-transform: translateY(-800px);
   -moz-transform: translateY(-800px);
   -ms-transform: translateY(-800px);
   -o-transform: translateY(-800px);
 }

}

.team-up {

 animation-name: team-up-Z;
 animation-duration: .4s;
 animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

}

.team-up::after {

 animation-name: team-up-Y;
 animation-duration: .4s;
 animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

} @keyframes nope {

 0% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

 6.5% {
   transform: translateX(-7px) rotateY(-10deg);
   -webkit-transform: translateX(-7px) rotateY(-10deg);
   -moz-transform: translateX(-7px) rotateY(-10deg);
   -ms-transform: translateX(-7px) rotateY(-10deg);
   -o-transform: translateX(-7px) rotateY(-10deg);
 }

 18.5% {
   transform: translateX(6px) rotateY(8deg);
   -webkit-transform: translateX(6px) rotateY(8deg);
   -moz-transform: translateX(6px) rotateY(8deg);
   -ms-transform: translateX(6px) rotateY(8deg);
   -o-transform: translateX(6px) rotateY(8deg);
 }

 31.5% {
   transform: translateX(-4px) rotateY(-6deg);
   -webkit-transform: translateX(-4px) rotateY(-6deg);
   -moz-transform: translateX(-4px) rotateY(-6deg);
   -ms-transform: translateX(-4px) rotateY(-6deg);
   -o-transform: translateX(-4px) rotateY(-6deg);
 }

 43.5% {
   transform: translateX(3px) rotateY(4deg);
   -webkit-transform: translateX(3px) rotateY(4deg);
   -moz-transform: translateX(3px) rotateY(4deg);
   -ms-transform: translateX(3px) rotateY(4deg);
   -o-transform: translateX(3px) rotateY(4deg);
 }

 50% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

 100% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

}

.nope {

 animation-name: nope;
 animation-duration: 3s;
 animation-timing-function: ease-in-out;

}