css动画效果

/* animation */

/* 淡入 */
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}

/* 淡入-从上 */
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px);}
    100%{opacity:1;transform:translateY(0);}
}

/* 淡入-从右 */
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px);}
    100%{opacity:1;transform:translateX(0);}
}

/* 淡入-从下 */
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px);}
    100%{opacity:1;transform:translateY(0);}
}

/* 淡入-从左 */
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px);}
    100%{opacity:1;transform:translateX(0);}
}

/* 淡出 */
@keyframes fadeout{
    0%{opacity:1;}
    100%{opacity:0;}
}

/* 淡出-向上 */
@keyframes fadeoutT{
    0%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(-100px);}
}

/* 淡出-向右 */
@keyframes fadeoutR{
    0%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(100px);}
}

/* 淡出-向下 */
@keyframes fadeoutB{
    0%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(100px);}
}

/* 淡出-向左 */
@keyframes fadeoutL{
    0%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(-100px);}
}

/* 弹跳 */
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-30px);}
    60%{transform:translateY(-15px);}
}

/* 弹入 */
@keyframes bouncein{
    0%{opacity:0;transform:scale(0.3);}
    50%{opacity:1;transform:scale(1.05);}
    70%{transform:scale(0.9);}
    100%{transform:scale(1);}
}

/* 弹入-从上 */
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px);}
    60%{opacity:1;transform:translateY(30px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}

/* 弹入-从右 */
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px);}
    60%{opacity:1;transform:translateX(-30px);}
    80%{transform:translateX(10px);}
    100%{transform:translateX(0);}
}

/* 弹入-从下 */
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px);}
    60%{opacity:1;transform:translateY(-30px);}
    80%{transform:translateY(10px);}
    100%{transform:translateY(0);}
}

/* 弹入-从左 */
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px);}
    60%{opacity:1;transform:translateX(30px);}
    80%{transform:translateX(-10px);}
    100%{transform:translateX(0);}
}

/* 弹出 */
@keyframes bounceout{
    0%{transform:scale(1);}
    25%{transform:scale(0.95);}
    50%{opacity:1;transform:scale(1.1);}
    100%{opacity:0;transform:scale(0.3);}
}

/* 弹出-向上*/
@keyframes bounceoutT{
    0%{transform:translateY(0);}
    20%{opacity:1;transform:translateY(20px);}
    100%{opacity:0;transform:translateY(-100px);}
}

/* 弹出-向右*/
@keyframes bounceoutR{
    0%{transform:translateX(0);}
    20%{opacity:1;transform:translateX(-20px);}
    100%{opacity:0;transform:translateX(100px);}
}

/* 弹出-向下 */
@keyframes bounceoutB{
    0%{transform:translateY(0);}
    20%{opacity:1;transform:translateY(-20px);}
    100%{opacity:0;transform:translateY(100px);}
}

/* 弹出-向左 */
@keyframes bounceoutL{
    0%{transform:translateX(0);}
    20%{opacity:1;transform:translateX(20px);}
    100%{opacity:0;transform:translateX(-200px);}
}

/* 转入 */
@keyframes rotatein{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}

/* 转入-从左上 */
@keyframes rotateinLT{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}

/* 转入-从左下 */
@keyframes rotateineftB{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}

/* 转入-从右上 */
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}

/* 转入-从右下*/
@keyframes rotateinRB{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}

/* 转出 */
@keyframes rotateout{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}

/* 转出-向左上 */
@keyframes rotateoutLT{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}

/* 转出-向左下 */
@keyframes rotateoutLB{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}

/* 转出-向右上 */
@keyframes rotateoutRT{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}

/* 转出-向右下 */
@keyframes rotateoutBR{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}

/* 翻转 */
@keyframes flip{
    0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
    40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
    50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
    80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
    100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}

/* 翻入-X轴 */
@keyframes flipinX{
    0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
    40%{transform:perspective(400px) rotateX(-10deg);}
    70%{transform:perspective(400px) rotateX(10deg);}
    100%{transform:perspective(400px) rotateX(0);opacity:1;}
}

/* 翻入-Y轴 */
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{transform:perspective(400px) rotateY(-10deg);}
    70%{transform:perspective(400px) rotateY(10deg);}
    100%{transform:perspective(400px) rotateY(0);opacity:1;}
}

/* 翻出-X轴 */
@keyframes flipoutX{
    0%{transform:perspective(400px) rotateX(0);opacity:1;}
    100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}

/* 翻出-Y轴 */
@keyframes flipoutY{
    0%{transform:perspective(400px) rotateY(0);opacity:1;}
    100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}

/* 闪烁 */
@keyframes flash{
    0%,50%,100%{opacity:1;}
    25%,75%{opacity:0;}
}

/* 震颤 */
@keyframes shake{
    0%,100%{transform:translateX(0);}
    10%,30%,50%,70%,90%{transform:translateX(-10px);}
    20%,40%,60%,80%{transform:translateX(10px);}
}

/* 摇摆 */
@keyframes swing{
    20%{transform:rotate(15deg);}
    40%{transform:rotate(-10deg);}
    60%{transform:rotate(5deg);}
    80%{transform:rotate(-5deg);}
    100%{transform:rotate(0);}
}

/* 摇晃 */
@keyframes wobble{
    0%{transform:translateX(0);}
    15%{transform:translateX(-100px) rotate(-5deg);}
    30%{transform:translateX(80px) rotate(3deg);}
    45%{transform:translateX(-65px) rotate(-3deg);}
    60%{transform:translateX(40px) rotate(2deg);}
    75%{transform:translateX(-20px) rotate(-1deg);}
    100%{transform:translateX(0);}
}

/* 震铃 */
@keyframes ring{
    0%{transform:scale(1);}
    10%,20%{transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
    100%{transform:scale(1) rotate(0);}
}