|
|
|
/* animation */
|
|
|
|
|
|
|
|
.Augly-bounce,
|
|
|
|
.Augly-flip,
|
|
|
|
.Augly-flash,
|
|
|
|
.Augly-shake,
|
|
|
|
.Augly-swing,
|
|
|
|
.Augly-wobble,
|
|
|
|
.Augly-ring {
|
|
|
|
-webkit-animation: 1s ease;
|
|
|
|
animation: 1s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.Augly-fadein,
|
|
|
|
.Augly-fadeinT,
|
|
|
|
.Augly-fadeinR,
|
|
|
|
.Augly-fadeinB,
|
|
|
|
.Augly-fadeinL,
|
|
|
|
.Augly-bouncein,
|
|
|
|
.Augly-bounceinT,
|
|
|
|
.Augly-bounceinR,
|
|
|
|
.Augly-bounceinB,
|
|
|
|
.Augly-bounceinL,
|
|
|
|
.Augly-rotatein,
|
|
|
|
.Augly-rotateinLT,
|
|
|
|
.Augly-rotateinLB,
|
|
|
|
.Augly-rotateinRT,
|
|
|
|
.Augly-rotateinRB,
|
|
|
|
.Augly-flipin,
|
|
|
|
.Augly-flipinX,
|
|
|
|
.Augly-flipinY {
|
|
|
|
-webkit-animation: 0.6s ease-out backwards;
|
|
|
|
animation: 0.6s ease-out backwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
.Augly-fadeout,
|
|
|
|
.Augly-fadeoutT,
|
|
|
|
.Augly-fadeoutR,
|
|
|
|
.Augly-fadeoutB,
|
|
|
|
.Augly-fadeoutL,
|
|
|
|
.Augly-bounceout,
|
|
|
|
.Augly-bounceoutT,
|
|
|
|
.Augly-bounceoutR,
|
|
|
|
.Augly-bounceoutB,
|
|
|
|
.Augly-bounceoutL,
|
|
|
|
.Augly-rotateout,
|
|
|
|
.Augly-rotateoutLT,
|
|
|
|
.Augly-rotateoutLB,
|
|
|
|
.Augly-rotateoutRT,
|
|
|
|
.Augly-rotateoutRB,
|
|
|
|
.Augly-flipout,
|
|
|
|
.Augly-flipoutX,
|
|
|
|
.Augly-flipoutY {
|
|
|
|
-webkit-animation: 1s ease-in forwards;
|
|
|
|
animation: 1s ease-in forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入 */
|
|
|
|
|
|
|
|
Augly-fadeinT .Augly-fadein {
|
|
|
|
-webkit-animation-name: fadein;
|
|
|
|
animation-name: fadein;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从上 */
|
|
|
|
|
|
|
|
.Augly-fadeinT {
|
|
|
|
-webkit-animation-name: fadeinT;
|
|
|
|
animation-name: fadeinT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从右 */
|
|
|
|
|
|
|
|
.Augly-fadeinR {
|
|
|
|
-webkit-animation-name: fadeinR;
|
|
|
|
animation-name: fadeinR;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从下 */
|
|
|
|
|
|
|
|
.Augly-fadeinB {
|
|
|
|
-webkit-animation-name: fadeinB;
|
|
|
|
animation-name: fadeinB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从左 */
|
|
|
|
|
|
|
|
.Augly-fadeinL {
|
|
|
|
-webkit-animation-name: fadeinL;
|
|
|
|
animation-name: fadeinL;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出 */
|
|
|
|
|
|
|
|
.Augly-fadeout {
|
|
|
|
-webkit-animation-name: fadeout;
|
|
|
|
animation-name: fadeout;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向上 */
|
|
|
|
|
|
|
|
.Augly-fadeoutT {
|
|
|
|
-webkit-animation-name: fadeoutT;
|
|
|
|
animation-name: fadeoutT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向右 */
|
|
|
|
|
|
|
|
.Augly-fadeoutR {
|
|
|
|
-webkit-animation-name: fadeoutR;
|
|
|
|
animation-name: fadeoutR;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向下 */
|
|
|
|
|
|
|
|
.Augly-fadeoutB {
|
|
|
|
-webkit-animation-name: fadeoutB;
|
|
|
|
animation-name: fadeoutB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向左 */
|
|
|
|
|
|
|
|
.Augly-fadeoutL {
|
|
|
|
-webkit-animation-name: fadeoutL;
|
|
|
|
animation-name: fadeoutL;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹跳 */
|
|
|
|
|
|
|
|
.Augly-bounce {
|
|
|
|
-webkit-animation-name: bounce;
|
|
|
|
animation-name: bounce;
|
|
|
|
}
|
|
|
|
/* 弹入 */
|
|
|
|
.Augly-bouncein {
|
|
|
|
-webkit-animation-name: bouncein;
|
|
|
|
animation-name: bouncein;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从上 */
|
|
|
|
|
|
|
|
.Augly-bounceinT {
|
|
|
|
-webkit-animation-name: bounceinT;
|
|
|
|
animation-name: bounceinT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从右 */
|
|
|
|
|
|
|
|
.Augly-bounceinR {
|
|
|
|
-webkit-animation-name: bounceinR;
|
|
|
|
animation-name: bounceinR;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从下 */
|
|
|
|
|
|
|
|
.Augly-bounceinB {
|
|
|
|
-webkit-animation-name: bounceinB;
|
|
|
|
animation-name: bounceinB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从左 */
|
|
|
|
|
|
|
|
.Augly-bounceinL {
|
|
|
|
-webkit-animation-name: bounceinL;
|
|
|
|
animation-name: bounceinL;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出 */
|
|
|
|
|
|
|
|
.Augly-bounceout {
|
|
|
|
-webkit-animation-name: bounceout;
|
|
|
|
animation-name: bounceout;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向上 */
|
|
|
|
|
|
|
|
.Augly-bounceoutT {
|
|
|
|
-webkit-animation-name: bounceoutT;
|
|
|
|
animation-name: bounceoutT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向右 */
|
|
|
|
|
|
|
|
.Augly-bounceoutR {
|
|
|
|
-webkit-animation-name: bounceoutR;
|
|
|
|
animation-name: bounceoutR;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向下 */
|
|
|
|
|
|
|
|
.Augly-bounceoutB {
|
|
|
|
-webkit-animation-name: bounceoutB;
|
|
|
|
animation-name: bounceoutB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向左 */
|
|
|
|
|
|
|
|
.Augly-bounceoutL {
|
|
|
|
-webkit-animation-name: bounceoutL;
|
|
|
|
animation-name: bounceoutL;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入 */
|
|
|
|
|
|
|
|
.Augly-rotatein {
|
|
|
|
-webkit-animation-name: rotatein;
|
|
|
|
animation-name: rotatein;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从左上 */
|
|
|
|
|
|
|
|
.Augly-rotateinLT {
|
|
|
|
-webkit-animation-name: rotateinLT;
|
|
|
|
animation-name: rotateinLT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从左下 */
|
|
|
|
|
|
|
|
.Augly-rotateinLB {
|
|
|
|
-webkit-animation-name: rotateinLB;
|
|
|
|
animation-name: rotateinLB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从右上 */
|
|
|
|
|
|
|
|
.Augly-rotateinRT {
|
|
|
|
-webkit-animation-name: rotateinRT;
|
|
|
|
animation-name: rotateinRT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从右下*/
|
|
|
|
|
|
|
|
.Augly-rotateinRB {
|
|
|
|
-webkit-animation-name: rotateinRB;
|
|
|
|
animation-name: rotateinRB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出 */
|
|
|
|
|
|
|
|
.Augly-rotateout {
|
|
|
|
-webkit-animation-name: rotateout;
|
|
|
|
animation-name: rotateout;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向左上 */
|
|
|
|
|
|
|
|
.Augly-rotateoutLT {
|
|
|
|
-webkit-animation-name: rotateoutLT;
|
|
|
|
animation-name: rotateoutLT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向左下 */
|
|
|
|
|
|
|
|
.Augly-rotateoutLB {
|
|
|
|
-webkit-animation-name: rotateoutLB;
|
|
|
|
animation-name: rotateoutLB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向右上 */
|
|
|
|
|
|
|
|
.Augly-rotateoutRT {
|
|
|
|
-webkit-animation-name: rotateoutRT;
|
|
|
|
animation-name: rotateoutRT;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向右下 */
|
|
|
|
|
|
|
|
.Augly-rotateoutRB {
|
|
|
|
-webkit-animation-name: rotateoutRB;
|
|
|
|
animation-name: rotateoutRB;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻转 */
|
|
|
|
|
|
|
|
.Augly-flip {
|
|
|
|
-webkit-animation-name: flip;
|
|
|
|
animation-name: flip;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻入-X轴 */
|
|
|
|
|
|
|
|
.Augly-flipinX {
|
|
|
|
-webkit-animation-name: flipinX;
|
|
|
|
animation-name: flipinX;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻入-Y轴 */
|
|
|
|
|
|
|
|
.Augly-flipin,
|
|
|
|
.Augly-flipinY {
|
|
|
|
-webkit-animation-name: flipinY;
|
|
|
|
animation-name: flipinY;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻出-X轴 */
|
|
|
|
|
|
|
|
.Augly-flipoutX {
|
|
|
|
-webkit-animation-name: flipoutX;
|
|
|
|
animation-name: flipoutX;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻出-Y轴 */
|
|
|
|
|
|
|
|
.Augly-flipout,
|
|
|
|
.Augly-flipoutY {
|
|
|
|
-webkit-animation-name: flipoutY;
|
|
|
|
animation-name: flipoutY;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 闪烁 */
|
|
|
|
|
|
|
|
.Augly-flash {
|
|
|
|
-webkit-animation-name: flash;
|
|
|
|
animation-name: flash;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 震颤 */
|
|
|
|
|
|
|
|
.Augly-shake {
|
|
|
|
-webkit-animation-name: shake;
|
|
|
|
animation-name: shake;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 摇摆 */
|
|
|
|
|
|
|
|
.Augly-swing {
|
|
|
|
-webkit-animation-name: swing;
|
|
|
|
animation-name: swing;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 摇晃 */
|
|
|
|
|
|
|
|
.Augly-wobble {
|
|
|
|
-webkit-animation-name: wobble;
|
|
|
|
animation-name: wobble;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 震铃 */
|
|
|
|
|
|
|
|
.Augly-ring {
|
|
|
|
-webkit-animation-name: ring;
|
|
|
|
animation-name: ring;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* define */
|
|
|
|
|
|
|
|
/* 淡入 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadein {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadein {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeinT {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100rpx);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeinT {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从右 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeinR {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeinR {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
transform: translateX(100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeinB {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeinB {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
transform: translateY(100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡入-从左 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeinL {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeinL {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeout {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeout {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeoutT {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeoutT {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向右 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeoutR {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeoutR {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
transform: translateX(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeoutB {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeoutB {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
transform: translateY(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 淡出-向左 */
|
|
|
|
|
|
|
|
@-webkit-keyframes fadeoutL {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeoutL {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹跳 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounce {
|
|
|
|
0%,
|
|
|
|
20%,
|
|
|
|
50%,
|
|
|
|
80%,
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: translateY(-30px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: translateY(-15px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
|
|
20%,
|
|
|
|
50%,
|
|
|
|
80%,
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: translateY(-30px);
|
|
|
|
transform: translateY(-30px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: translateY(-15px);
|
|
|
|
transform: translateY(-15px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入 */
|
|
|
|
|
|
|
|
@-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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bouncein {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: scale(0.3);
|
|
|
|
transform: scale(0.3);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: scale(1.05);
|
|
|
|
transform: scale(1.05);
|
|
|
|
}
|
|
|
|
70% {
|
|
|
|
-webkit-transform: scale(0.9);
|
|
|
|
transform: scale(0.9);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: scale(1);
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceinT {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateY(-10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceinT {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(30px);
|
|
|
|
transform: translateY(30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateY(-10px);
|
|
|
|
transform: translateY(-10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从右 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceinR {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(-30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateX(10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceinR {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
transform: translateX(100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(-30px);
|
|
|
|
transform: translateX(-30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateX(10px);
|
|
|
|
transform: translateX(10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceinB {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(-30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateY(10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceinB {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
transform: translateY(100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(-30px);
|
|
|
|
transform: translateY(-30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateY(10px);
|
|
|
|
transform: translateY(10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹入-从左 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceinL {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateX(-10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceinL {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(30px);
|
|
|
|
transform: translateX(30px);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateX(-10px);
|
|
|
|
transform: translateX(-10px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出 */
|
|
|
|
|
|
|
|
@-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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceout {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: scale(1);
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
25% {
|
|
|
|
-webkit-transform: scale(0.95);
|
|
|
|
transform: scale(0.95);
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: scale(1.1);
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: scale(0.3);
|
|
|
|
transform: scale(0.3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向上*/
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceoutT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceoutT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(20px);
|
|
|
|
transform: translateY(20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(-100px);
|
|
|
|
transform: translateY(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向右*/
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceoutR {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(-20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceoutR {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(-20px);
|
|
|
|
transform: translateX(-20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(100px);
|
|
|
|
transform: translateX(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceoutB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(-20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceoutB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateY(-20px);
|
|
|
|
transform: translateY(-20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateY(100px);
|
|
|
|
transform: translateY(100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 弹出-向左 */
|
|
|
|
|
|
|
|
@-webkit-keyframes bounceoutL {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-100px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes bounceoutL {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
20% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: translateX(20px);
|
|
|
|
transform: translateX(20px);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: translateX(-200px);
|
|
|
|
transform: translateX(-200px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotatein {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: rotate(-200deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotatein {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: rotate(-200deg);
|
|
|
|
transform: rotate(-200deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从左上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateinLT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateinLT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从左下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateineftB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateineftB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从右上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateinRT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateinRT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转入-从右下*/
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateinRB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateinRB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出 */
|
|
|
|
|
|
|
|
@-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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateout {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: center center;
|
|
|
|
transform-origin: center center;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: center center;
|
|
|
|
transform-origin: center center;
|
|
|
|
-webkit-transform: rotate(200deg);
|
|
|
|
transform: rotate(200deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向左上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateoutLT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateoutLT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向左下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateoutLB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateoutLB {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: left bottom;
|
|
|
|
transform-origin: left bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向右上 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateoutRT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateoutRT {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 转出-向右下 */
|
|
|
|
|
|
|
|
@-webkit-keyframes rotateoutBR {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotateoutBR {
|
|
|
|
0% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform-origin: right bottom;
|
|
|
|
transform-origin: right bottom;
|
|
|
|
-webkit-transform: rotate(-90deg);
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻转 */
|
|
|
|
|
|
|
|
@-webkit-keyframes flip {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(0);
|
|
|
|
-webkit-animation-timing-function: ease-out;
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
|
|
|
-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) rotateY(360deg) scale(0.95);
|
|
|
|
-webkit-animation-timing-function: ease-in;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) scale(1);
|
|
|
|
-webkit-animation-timing-function: ease-in;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flip {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(0);
|
|
|
|
transform: perspective(400px) rotateY(0);
|
|
|
|
-webkit-animation-timing-function: ease-out;
|
|
|
|
animation-timing-function: ease-out;
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
|
|
|
transform: perspective(400px) translateZ(150px) rotateY(170deg);
|
|
|
|
-webkit-animation-timing-function: ease-out;
|
|
|
|
animation-timing-function: ease-out;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
|
|
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
|
|
|
|
-webkit-animation-timing-function: ease-in;
|
|
|
|
animation-timing-function: ease-in;
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
|
|
|
|
transform: perspective(400px) rotateY(360deg) scale(0.95);
|
|
|
|
-webkit-animation-timing-function: ease-in;
|
|
|
|
animation-timing-function: ease-in;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) scale(1);
|
|
|
|
transform: perspective(400px) scale(1);
|
|
|
|
-webkit-animation-timing-function: ease-in;
|
|
|
|
animation-timing-function: ease-in;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻入-X轴 */
|
|
|
|
|
|
|
|
@-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(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flipinX {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
|
|
transform: perspective(400px) rotateX(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(-10deg);
|
|
|
|
transform: perspective(400px) rotateX(-10deg);
|
|
|
|
}
|
|
|
|
70% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(10deg);
|
|
|
|
transform: perspective(400px) rotateX(10deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(0);
|
|
|
|
transform: perspective(400px) rotateX(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻入-Y轴 */
|
|
|
|
|
|
|
|
@-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(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flipinY {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
|
|
transform: perspective(400px) rotateY(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(-10deg);
|
|
|
|
transform: perspective(400px) rotateY(-10deg);
|
|
|
|
}
|
|
|
|
70% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
|
|
transform: perspective(400px) rotateY(10deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(0);
|
|
|
|
transform: perspective(400px) rotateY(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻出-X轴 */
|
|
|
|
|
|
|
|
@-webkit-keyframes flipoutX {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flipoutX {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(0);
|
|
|
|
transform: perspective(400px) rotateX(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateX(90deg);
|
|
|
|
transform: perspective(400px) rotateX(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 翻出-Y轴 */
|
|
|
|
|
|
|
|
@-webkit-keyframes flipoutY {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flipoutY {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(0);
|
|
|
|
transform: perspective(400px) rotateY(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
|
|
transform: perspective(400px) rotateY(90deg);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 闪烁 */
|
|
|
|
|
|
|
|
@-webkit-keyframes flash {
|
|
|
|
0%,
|
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
25%,
|
|
|
|
75% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flash {
|
|
|
|
0%,
|
|
|
|
50%,
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
25%,
|
|
|
|
75% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 震颤 */
|
|
|
|
|
|
|
|
@-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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes shake {
|
|
|
|
0%,
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
10%,
|
|
|
|
30%,
|
|
|
|
50%,
|
|
|
|
70%,
|
|
|
|
90% {
|
|
|
|
-webkit-transform: translateX(-10px);
|
|
|
|
transform: translateX(-10px);
|
|
|
|
}
|
|
|
|
20%,
|
|
|
|
40%,
|
|
|
|
60%,
|
|
|
|
80% {
|
|
|
|
-webkit-transform: translateX(10px);
|
|
|
|
transform: translateX(10px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 摇摆 */
|
|
|
|
|
|
|
|
@-webkit-keyframes swing {
|
|
|
|
20% {
|
|
|
|
-webkit-transform: rotate(30deg);
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: rotate(-20deg);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: rotate(10deg);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: rotate(-10deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes swing {
|
|
|
|
20% {
|
|
|
|
-webkit-transform: rotate(30deg);
|
|
|
|
transform: rotate(30deg);
|
|
|
|
}
|
|
|
|
40% {
|
|
|
|
-webkit-transform: rotate(-20deg);
|
|
|
|
transform: rotate(-20deg);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: rotate(10deg);
|
|
|
|
transform: rotate(10deg);
|
|
|
|
}
|
|
|
|
80% {
|
|
|
|
-webkit-transform: rotate(-10deg);
|
|
|
|
transform: rotate(-10deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: rotate(0);
|
|
|
|
transform: rotate(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 摇晃 */
|
|
|
|
|
|
|
|
@-webkit-keyframes wobble {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
15% {
|
|
|
|
-webkit-transform: translateX(-100px) rotate(-5deg);
|
|
|
|
}
|
|
|
|
30% {
|
|
|
|
-webkit-transform: translateX(80px) rotate(3deg);
|
|
|
|
}
|
|
|
|
45% {
|
|
|
|
-webkit-transform: translateX(-65px) rotate(-3deg);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: translateX(40px) rotate(2deg);
|
|
|
|
}
|
|
|
|
75% {
|
|
|
|
-webkit-transform: translateX(-20px) rotate(-1deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes wobble {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
15% {
|
|
|
|
-webkit-transform: translateX(-100px) rotate(-5deg);
|
|
|
|
transform: translateX(-100px) rotate(-5deg);
|
|
|
|
}
|
|
|
|
30% {
|
|
|
|
-webkit-transform: translateX(80px) rotate(3deg);
|
|
|
|
transform: translateX(80px) rotate(3deg);
|
|
|
|
}
|
|
|
|
45% {
|
|
|
|
-webkit-transform: translateX(-65px) rotate(-3deg);
|
|
|
|
transform: translateX(-65px) rotate(-3deg);
|
|
|
|
}
|
|
|
|
60% {
|
|
|
|
-webkit-transform: translateX(40px) rotate(2deg);
|
|
|
|
transform: translateX(40px) rotate(2deg);
|
|
|
|
}
|
|
|
|
75% {
|
|
|
|
-webkit-transform: translateX(-20px) rotate(-1deg);
|
|
|
|
transform: translateX(-20px) rotate(-1deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: translateX(0);
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 震铃 */
|
|
|
|
|
|
|
|
@-webkit-keyframes ring {
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes ring {
|
|
|
|
0% {
|
|
|
|
-webkit-transform: scale(1);
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
10%,
|
|
|
|
20% {
|
|
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
|
|
transform: scale(0.9) rotate(-3deg);
|
|
|
|
}
|
|
|
|
30%,
|
|
|
|
50%,
|
|
|
|
70%,
|
|
|
|
90% {
|
|
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
|
|
transform: scale(1.1) rotate(3deg);
|
|
|
|
}
|
|
|
|
40%,
|
|
|
|
60%,
|
|
|
|
80% {
|
|
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
|
|
transform: scale(1.1) rotate(-3deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
-webkit-transform: scale(1) rotate(0);
|
|
|
|
transform: scale(1) rotate(0);
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
@2x.png){kind=link}
@2x.png)
