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;

}

Template:BIT-China/css/css-animation

Contents

==================================

==================================

==================================

==================================

=================================

=================================

=================================

=================================

==================================

==================================

==================================

==================================

=================================

=================================

==================================

==================================

==================================

==================================

==================================

==================================

===========================

===========================