View source for Template:BIT-China/css/css-animation

.animated {
  animation-fill-mode: both;
}

/*
==============================================

控制 home_page.html 的 A.gif 的动画
 
==============================================
*/
@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;
}
/*
==============================================

控制 home_page.html 的 A,left-nav,top-up 的动画 缩放以及改变透明度
 
==============================================
*/
@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 cut-shape {
  from {
    opacity: 0;
    transform: scale(0);
    sclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  14% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
  }

  24% {
    clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
  }

  28% {
    clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
  }

  38% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
  }

  42% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
  }

  52% {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
  }

  56% {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
  }

  66% {
    clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }

  70% {
    clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }

  80% {
    clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
  }

  84% {
    clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
  }

  to {
    opacity: 1;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

.cut-shape {
  animation-name: cut-shape;
  animation-duration: 1.6s;
}
@keyframes cut-shape-back {
  from {
    opacity: 1;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  14% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
  }

  24% {
    clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
  }

  28% {
    clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
  }

  38% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
  }

  42% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
  }

  52% {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
  }

  56% {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
  }

  66% {
    clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }

  70% {
    clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }

  80% {
    clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
  }

  84% {
    clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
  }

  to {
    opacity: 0;
    transform: scale(0);
    sclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }
}

.cut-shape-back {
  animation-name: cut-shape-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;
}
/*
==============================================

控制 team 页面的切换动画
 
==============================================
*/
@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);
}

/*
=======================================

nope

=======================================
*/
@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;
}