2018-10-17

/*向左移动并弹性显示*/

@-webkit-keyframes fadeToLeftTan{

0%{ -webkit-transform:translateX(100%); opacity:0;}

70%{ -webkit-transform:translateX(-5%); opacity:1;}

80%{ -webkit-transform:translateX(2%); opacity:1;}

90%{ -webkit-transform:translateX(-2%); opacity:1;}

100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeToLeftTan{

0%{ transform:translateX(100%); opacity:0;}

70%{ transform:translateX(-5%); opacity:1;}

80%{ transform:translateX(2%); opacity:1;}

90%{ transform:translateX(-2%); opacity:1;}

100%{ transform:translateX(0); opacity:1;}

}

/*向右移动并弹性显示*/

@-webkit-keyframes fadeToRightTan{

0%{ -webkit-transform:translateX(-100%); opacity:0;}

70%{ -webkit-transform:translateX(5%); opacity:1;}

80%{ -webkit-transform:translateX(-2%); opacity:1;}

90%{ -webkit-transform:translateX(2%); opacity:1;}

100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeToRightTan{

0%{ transform:translateX(-100%); opacity:0;}

70%{ transform:translateX(5%); opacity:1;}

80%{ -webkit-transform:translateX(-2%); opacity:1;}

90%{ -webkit-transform:translateX(2%); opacity:1;}

100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeToRightTan{

0%{ transform:translateX(-100%); opacity:0;}

70%{ transform:translateX(5%); opacity:1;}

80%{ transform:translateX(-2%); opacity:1;}

90%{ transform:translateX(2%); opacity:1;}

100%{ transform:translateX(0); opacity:1;}

}

/*向上移动并弹性显示*/

@-webkit-keyframes fadeToTopTan{

0%{ -webkit-transform:translateY(100%); opacity:0;}

70%{ -webkit-transform:translateY(-5%); opacity:1;}

80%{ -webkit-transform:translateY(2%); opacity:1;}

90%{ -webkit-transform:translateY(-2%); opacity:1;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToTopTan{

0%{ transform:translateY(100%); opacity:0;}

70%{ transform:translateY(-5%); opacity:1;}

80%{ transform:translateY(2%); opacity:1;}

90%{ transform:translateY(-2%); opacity:1;}

100%{ transform:translateY(0); opacity:1;}

}

/*向下移动并弹性显示*/

@-webkit-keyframes fadeToDownTan{

0%{ -webkit-transform:translateY(-100%); opacity:0;}

70%{ -webkit-transform:translateY(5%); opacity:1;}

80%{ -webkit-transform:translateY(-2%); opacity:1;}

90%{ -webkit-transform:translateY(2%); opacity:1;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToDownTan{

0%{ transform:translateY(-100%); opacity:0;}

70%{ transform:translateY(5%); opacity:1;}

80%{ transform:translateY(-2%); opacity:1;}

90%{ transform:translateY(2%); opacity:1;}

100%{ transform:translateY(0); opacity:1;}

}

/*从大向小变化弹性显示*/

@-webkit-keyframes fadeInMaxToMinTan{

0%{ -webkit-transform:scale(2); opacity:0;}

70%{ -webkit-transform:scale(.9); opacity:1;}

85%{ -webkit-transform:scale(1.1); opacity:1;}

100%{ -webkit-transform:scale(1); opacity:1;}

}

@keyframes fadeInMaxToMinTan{

0%{ transform:scale(2); opacity:0;}

70%{ transform:scale(.9); opacity:1;}

85%{ transform:scale(1.1); opacity:1;}

100%{ transform:scale(1); opacity:1;}

}

/*从小向大变化弹性显示*/

@-webkit-keyframes fadeInMinToMaxTan{

0%{ -webkit-transform:scale(0); opacity:0;}

70%{ -webkit-transform:scale(1.1); opacity:1;}

85%{ -webkit-transform:scale(.9); opacity:1;}

100%{ -webkit-transform:scale(1); opacity:1;}

}

@keyframes fadeInMinToMaxTan{

0%{ transform:scale(0); opacity:0;}

70%{ transform:scale(1.1); opacity:1;}

85%{ transform:scale(.9); opacity:1;}

100%{ transform:scale(1); opacity:1;}

}

/**********************************/

/*向左移动显示*/

@-webkit-keyframes fadeToLeft{

0%{ -webkit-transform:translateX(100%); opacity:0;}

100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeToLeft{

0%{ transform:translateX(100%); opacity:0;}

100%{ transform:translateX(0); opacity:1;}

}

/*向右移动显示*/

@-webkit-keyframes fadeToRight{

0%{ -webkit-transform:translateX(-100%); opacity:0;}

100%{ -webkit-transform:translateX(0); opacity:1;}

}

@keyframes fadeToRight{

0%{ transform:translateX(-100%); opacity:0;}

100%{ transform:translateX(0); opacity:1;}

}

/*向上移动显示*/

@-webkit-keyframes fadeToTop{

0%{ -webkit-transform:translateY(100%); opacity:0;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToTop{

0%{ transform:translateY(100%); opacity:0;}

100%{ transform:translateY(0); opacity:1;}

}

/*向上60移动显示*/

@-webkit-keyframes fadeToTop60{

0%{ -webkit-transform:translateY(60px); opacity:0;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToTop60{

0%{ transform:translateY(60px); opacity:0;}

100%{ transform:translateY(0); opacity:1;}

}

/*向下移动显示*/

@-webkit-keyframes fadeToDown{

0%{ -webkit-transform:translateY(-100%); opacity:0;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToDown{

0%{ transform:translateY(-100%); opacity:0;}

100%{ transform:translateY(0); opacity:1;}

}

/*向下60移动显示*/

@-webkit-keyframes fadeToDown60{

0%{ -webkit-transform:translateY(-60px); opacity:0;}

100%{ -webkit-transform:translateY(0); opacity:1;}

}

@keyframes fadeToDown60{

0%{ transform:translateY(-60px); opacity:0;}

100%{ transform:translateY(0); opacity:1;}

}

/**********************************/

/*上下微移漂浮*/

@-webkit-keyframes flashTopDown{

0%{ -webkit-transform:translateY(0); opacity:1;}

100%{ -webkit-transform:translateY(8px); opacity:.8;}

}

@keyframes flashTopDown{

0%{ transform:translateY(0); opacity:1;}

100%{ transform:translateY(8px); opacity:.8;}

}

/**********************************/

/*从大向小变化显示*/

@-webkit-keyframes fadeInMaxToMin{

0%{ -webkit-transform:scale(2); opacity:0;}

100%{ -webkit-transform:scale(1); opacity:1;}

}

@keyframes fadeInMaxToMin{

0%{ transform:scale(2); opacity:0;}

100%{ transform:scale(1); opacity:1;}

}

/*从小向大变化显示*/

@-webkit-keyframes fadeInMinToMax{

0%{ -webkit-transform:scale(0); opacity:0;}

100%{ -webkit-transform:scale(1); opacity:1;}

}

/**********************************/

/*大小闪动变化  变小*/

@-webkit-keyframes flashMaxMin{

0%{ -webkit-transform:scale(1);}

100%{ -webkit-transform:scale(.98);}

}

@keyframes flashMaxMin{

0%{ transform:scale(1);}

100%{ transform:scale(.98);}

}

/*大小闪动变化变大*/

@-webkit-keyframes flashMax{

    0%{ -webkit-transform:scale(1);}

    100%{ -webkit-transform:scale(1.05);}

} 

@keyframes flashMax{

    0%{ transform:scale(1);}

    100%{ transform:scale(1.05);}

}

/**********************************/

/*渐显*/

@-webkit-keyframes fadeIn{

0%{ opacity:0;}

100%{ opacity:1;}

}

@keyframes fadeIn{

0%{ opacity:0;}

100%{ opacity:1;}

}

/*渐隐*/

@-webkit-keyframes fadeOut{

0%{ opacity:1;}

100%{ opacity:0;}

}

@keyframes fadeOut{

0%{ opacity:1;}

100%{ opacity:0;}

}