您的位置:365bet手机在线 > Web前端 > Web前端之家,动画已丢

Web前端之家,动画已丢

发布时间:2019-11-22 18:38编辑:Web前端浏览(186)

    .net代码复制代码 代码如下: ...... ....

    原文:

    Jquery客户端测试代码

    CSS3动画

    简要展示了CSS3常用动画效果,以及所使用代码。

    复制代码 代码如下:

    bounce

    复制

    展开代码

    @-webkit-keyframes bounce {
        0%,100%,20%,53%,80% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    
        40%,43% {
            -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-30px,0);
            transform: translate3d(0,-30px,0)
        }
    
        70% {
            -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-15px,0);
            transform: translate3d(0,-15px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0)
        }
    }
    
    @keyframes bounce {
        0%,100%,20%,53%,80% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    
        40%,43% {
            -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-30px,0);
            -ms-transform: translate3d(0,-30px,0);
            transform: translate3d(0,-30px,0)
        }
    
        70% {
            -webkit-transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            transition-timing-function: cubic-bezier(0.755,.050,.855,.060);
            -webkit-transform: translate3d(0,-15px,0);
            -ms-transform: translate3d(0,-15px,0);
            transform: translate3d(0,-15px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,-4px,0);
            -ms-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0)
        }
    }
    
    .bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom
    }
    

    1905电影网

    www.1905.com

     

    flash

    复制

    展开代码

    @-webkit-keyframes flash {
        0%,100%,50% {
            opacity: 1
        }
    
        25%,75% {
            opacity: 0
        }
    }
    
    @keyframes flash {
        0%,100%,50% {
            opacity: 1
        }
    
        25%,75% {
            opacity: 0
        }
    }
    
    .flash {
        -webkit-animation-name: flash;
        animation-name: flash
    }
    

    1905电影网

    www.1905.com

     

    pulse

    复制

    展开代码

    @-webkit-keyframes pulse {
        0% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        50% {
            -webkit-transform: scale3d(1.05,1.05,1.05);
            transform: scale3d(1.05,1.05,1.05)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    @keyframes pulse {
        0% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        50% {
            -webkit-transform: scale3d(1.05,1.05,1.05);
            -ms-transform: scale3d(1.05,1.05,1.05);
            transform: scale3d(1.05,1.05,1.05)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    .pulse {
        -webkit-animation-name: pulse;
        animation-name: pulse
    }
    

    1905电影网

    www.1905.com

     

    rubberBand

    复制

    展开代码

    @-webkit-keyframes rubberBand {
        0% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        30% {
            -webkit-transform: scale3d(1.25,.75,1);
            transform: scale3d(1.25,.75,1)
        }
    
        40% {
            -webkit-transform: scale3d(0.75,1.25,1);
            transform: scale3d(0.75,1.25,1)
        }
    
        50% {
            -webkit-transform: scale3d(1.15,.85,1);
            transform: scale3d(1.15,.85,1)
        }
    
        65% {
            -webkit-transform: scale3d(.95,1.05,1);
            transform: scale3d(.95,1.05,1)
        }
    
        75% {
            -webkit-transform: scale3d(1.05,.95,1);
            transform: scale3d(1.05,.95,1)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    @keyframes rubberBand {
        0% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        30% {
            -webkit-transform: scale3d(1.25,.75,1);
            -ms-transform: scale3d(1.25,.75,1);
            transform: scale3d(1.25,.75,1)
        }
    
        40% {
            -webkit-transform: scale3d(0.75,1.25,1);
            -ms-transform: scale3d(0.75,1.25,1);
            transform: scale3d(0.75,1.25,1)
        }
    
        50% {
            -webkit-transform: scale3d(1.15,.85,1);
            -ms-transform: scale3d(1.15,.85,1);
            transform: scale3d(1.15,.85,1)
        }
    
        65% {
            -webkit-transform: scale3d(.95,1.05,1);
            -ms-transform: scale3d(.95,1.05,1);
            transform: scale3d(.95,1.05,1)
        }
    
        75% {
            -webkit-transform: scale3d(1.05,.95,1);
            -ms-transform: scale3d(1.05,.95,1);
            transform: scale3d(1.05,.95,1)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    .rubberBand {
        -webkit-animation-name: rubberBand;
        animation-name: rubberBand
    }
    

    1905电影网

    www.1905.com

     

    shake

    复制

    展开代码

    @-webkit-keyframes shake {
        0%,100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    
        10%,30%,50%,70%,90% {
            -webkit-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0)
        }
    
        20%,40%,60%,80% {
            -webkit-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0)
        }
    }
    
    @keyframes shake {
        0%,100% {
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    
        10%,30%,50%,70%,90% {
            -webkit-transform: translate3d(-10px,0,0);
            -ms-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0)
        }
    
        20%,40%,60%,80% {
            -webkit-transform: translate3d(10px,0,0);
            -ms-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0)
        }
    }
    
    .shake {
        -webkit-animation-name: shake;
        animation-name: shake
    }
    

    1905电影网

    www.1905.com

     

    swing

    复制

    展开代码

    @-webkit-keyframes swing {
        20% {
            -webkit-transform: rotate3d(0,0,1,15deg);
            transform: rotate3d(0,0,1,15deg)
        }
    
        40% {
            -webkit-transform: rotate3d(0,0,1,-10deg);
            transform: rotate3d(0,0,1,-10deg)
        }
    
        60% {
            -webkit-transform: rotate3d(0,0,1,5deg);
            transform: rotate3d(0,0,1,5deg)
        }
    
        80% {
            -webkit-transform: rotate3d(0,0,1,-5deg);
            transform: rotate3d(0,0,1,-5deg)
        }
    
        100% {
            -webkit-transform: rotate3d(0,0,1,0deg);
            transform: rotate3d(0,0,1,0deg)
        }
    }
    
    @keyframes swing {
        20% {
            -webkit-transform: rotate3d(0,0,1,15deg);
            -ms-transform: rotate3d(0,0,1,15deg);
            transform: rotate3d(0,0,1,15deg)
        }
    
        40% {
            -webkit-transform: rotate3d(0,0,1,-10deg);
            -ms-transform: rotate3d(0,0,1,-10deg);
            transform: rotate3d(0,0,1,-10deg)
        }
    
        60% {
            -webkit-transform: rotate3d(0,0,1,5deg);
            -ms-transform: rotate3d(0,0,1,5deg);
            transform: rotate3d(0,0,1,5deg)
        }
    
        80% {
            -webkit-transform: rotate3d(0,0,1,-5deg);
            -ms-transform: rotate3d(0,0,1,-5deg);
            transform: rotate3d(0,0,1,-5deg)
        }
    
        100% {
            -webkit-transform: rotate3d(0,0,1,0deg);
            -ms-transform: rotate3d(0,0,1,0deg);
            transform: rotate3d(0,0,1,0deg)
        }
    }
    
    .swing {
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center;
        -webkit-animation-name: swing;
        animation-name: swing
    }
    

    1905电影网

    www.1905.com

     

    tada

    复制

    展开代码

    @-webkit-keyframes tada {
        0% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        10%,20% {
            -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
            transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
        }
    
        30%,50%,70%,90% {
            -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
            transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
        }
    
        40%,60%,80% {
            -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
            transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    @keyframes tada {
        0% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    
        10%,20% {
            -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
            -ms-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
            transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
        }
    
        30%,50%,70%,90% {
            -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
            -ms-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
            transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
        }
    
        40%,60%,80% {
            -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
            -ms-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
            transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
        }
    
        100% {
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    .tada {
        -webkit-animation-name: tada;
        animation-name: tada
    }
    

    1905电影网

    www.1905.com

     

    wobble

    复制

    展开代码

    @-webkit-keyframes wobble {
        0% {
            -webkit-transform: none;
            transform: none
        }
    
        15% {
            -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
            transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
        }
    
        30% {
            -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
            transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
        }
    
        45% {
            -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
            transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
        }
    
        60% {
            -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
            transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
        }
    
        75% {
            -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
            transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
        }
    
        100% {
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes wobble {
        0% {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    
        15% {
            -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
            -ms-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
            transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
        }
    
        30% {
            -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
            -ms-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
            transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
        }
    
        45% {
            -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
            -ms-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
            transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
        }
    
        60% {
            -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
            -ms-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
            transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
        }
    
        75% {
            -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
            -ms-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
            transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
        }
    
        100% {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .wobble {
        -webkit-animation-name: wobble;
        animation-name: wobble
    }
    

    1905电影网

    www.1905.com

     

    bounceIn

    复制

    展开代码

    @-webkit-keyframes bounceIn {
        0%,100%,20%,40%,60%,80% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3,.3,.3);
            transform: scale3d(.3,.3,.3)
        }
    
        20% {
            -webkit-transform: scale3d(1.1,1.1,1.1);
            transform: scale3d(1.1,1.1,1.1)
        }
    
        40% {
            -webkit-transform: scale3d(.9,.9,.9);
            transform: scale3d(.9,.9,.9)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: scale3d(1.03,1.03,1.03);
            transform: scale3d(1.03,1.03,1.03)
        }
    
        80% {
            -webkit-transform: scale3d(.97,.97,.97);
            transform: scale3d(.97,.97,.97)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    @keyframes bounceIn {
        0%,100%,20%,40%,60%,80% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3,.3,.3);
            -ms-transform: scale3d(.3,.3,.3);
            transform: scale3d(.3,.3,.3)
        }
    
        20% {
            -webkit-transform: scale3d(1.1,1.1,1.1);
            -ms-transform: scale3d(1.1,1.1,1.1);
            transform: scale3d(1.1,1.1,1.1)
        }
    
        40% {
            -webkit-transform: scale3d(.9,.9,.9);
            -ms-transform: scale3d(.9,.9,.9);
            transform: scale3d(.9,.9,.9)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: scale3d(1.03,1.03,1.03);
            -ms-transform: scale3d(1.03,1.03,1.03);
            transform: scale3d(1.03,1.03,1.03)
        }
    
        80% {
            -webkit-transform: scale3d(.97,.97,.97);
            -ms-transform: scale3d(.97,.97,.97);
            transform: scale3d(.97,.97,.97)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: scale3d(1,1,1);
            -ms-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    .bounceIn {
        -webkit-animation-name: bounceIn;
        animation-name: bounceIn;
        -webkit-animation-duration: .75s;
        animation-duration: .75s
    }
    

    1905电影网

    www.1905.com

     

    bounceInDown

    复制

    展开代码

    @-webkit-keyframes bounceInDown {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-3000px,0);
            transform: translate3d(0,-3000px,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(0,25px,0);
            transform: translate3d(0,25px,0)
        }
    
        75% {
            -webkit-transform: translate3d(0,-10px,0);
            transform: translate3d(0,-10px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,5px,0);
            transform: translate3d(0,5px,0)
        }
    
        100% {
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes bounceInDown {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-3000px,0);
            -ms-transform: translate3d(0,-3000px,0);
            transform: translate3d(0,-3000px,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(0,25px,0);
            -ms-transform: translate3d(0,25px,0);
            transform: translate3d(0,25px,0)
        }
    
        75% {
            -webkit-transform: translate3d(0,-10px,0);
            -ms-transform: translate3d(0,-10px,0);
            transform: translate3d(0,-10px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,5px,0);
            -ms-transform: translate3d(0,5px,0);
            transform: translate3d(0,5px,0)
        }
    
        100% {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .bounceInDown {
        -webkit-animation-name: bounceInDown;
        animation-name: bounceInDown
    }
    

    1905电影网

    www.1905.com

     

    bounceInLeft

    复制

    展开代码

    @-webkit-keyframes bounceInLeft {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3000px,0,0);
            transform: translate3d(-3000px,0,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(25px,0,0);
            transform: translate3d(25px,0,0)
        }
    
        75% {
            -webkit-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0)
        }
    
        90% {
            -webkit-transform: translate3d(5px,0,0);
            transform: translate3d(5px,0,0)
        }
    
        100% {
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes bounceInLeft {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3000px,0,0);
            -ms-transform: translate3d(-3000px,0,0);
            transform: translate3d(-3000px,0,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(25px,0,0);
            -ms-transform: translate3d(25px,0,0);
            transform: translate3d(25px,0,0)
        }
    
        75% {
            -webkit-transform: translate3d(-10px,0,0);
            -ms-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0)
        }
    
        90% {
            -webkit-transform: translate3d(5px,0,0);
            -ms-transform: translate3d(5px,0,0);
            transform: translate3d(5px,0,0)
        }
    
        100% {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .bounceInLeft {
        -webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft
    }
    

    1905电影网

    www.1905.com

     

    bounceInRight

    复制

    展开代码

    @-webkit-keyframes bounceInRight {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3000px,0,0);
            transform: translate3d(3000px,0,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(-25px,0,0);
            transform: translate3d(-25px,0,0)
        }
    
        75% {
            -webkit-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0)
        }
    
        90% {
            -webkit-transform: translate3d(-5px,0,0);
            transform: translate3d(-5px,0,0)
        }
    
        100% {
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes bounceInRight {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(3000px,0,0);
            -ms-transform: translate3d(3000px,0,0);
            transform: translate3d(3000px,0,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(-25px,0,0);
            -ms-transform: translate3d(-25px,0,0);
            transform: translate3d(-25px,0,0)
        }
    
        75% {
            -webkit-transform: translate3d(10px,0,0);
            -ms-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0)
        }
    
        90% {
            -webkit-transform: translate3d(-5px,0,0);
            -ms-transform: translate3d(-5px,0,0);
            transform: translate3d(-5px,0,0)
        }
    
        100% {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .bounceInRight {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight
    }
    

    1905电影网

    www.1905.com

     

    bounceInUp

    复制

    展开代码

    @-webkit-keyframes bounceInUp {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,3000px,0);
            transform: translate3d(0,3000px,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0)
        }
    
        75% {
            -webkit-transform: translate3d(0,10px,0);
            transform: translate3d(0,10px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,-5px,0);
            transform: translate3d(0,-5px,0)
        }
    
        100% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    }
    
    @keyframes bounceInUp {
        0%,100%,60%,75%,90% {
            -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,3000px,0);
            -ms-transform: translate3d(0,3000px,0);
            transform: translate3d(0,3000px,0)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: translate3d(0,-20px,0);
            -ms-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0)
        }
    
        75% {
            -webkit-transform: translate3d(0,10px,0);
            -ms-transform: translate3d(0,10px,0);
            transform: translate3d(0,10px,0)
        }
    
        90% {
            -webkit-transform: translate3d(0,-5px,0);
            -ms-transform: translate3d(0,-5px,0);
            transform: translate3d(0,-5px,0)
        }
    
        100% {
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0)
        }
    }
    
    .bounceInUp {
        -webkit-animation-name: bounceInUp;
        animation-name: bounceInUp
    }
    

    1905电影网

    www.1905.com

     

    bounceOut

    复制

    展开代码

    @-webkit-keyframes bounceOut {
        20% {
            -webkit-transform: scale3d(.9,.9,.9);
            transform: scale3d(.9,.9,.9)
        }
    
        50%,55% {
            opacity: 1;
            -webkit-transform: scale3d(1.1,1.1,1.1);
            transform: scale3d(1.1,1.1,1.1)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: scale3d(.3,.3,.3);
            transform: scale3d(.3,.3,.3)
        }
    }
    
    @keyframes bounceOut {
        20% {
            -webkit-transform: scale3d(.9,.9,.9);
            -ms-transform: scale3d(.9,.9,.9);
            transform: scale3d(.9,.9,.9)
        }
    
        50%,55% {
            opacity: 1;
            -webkit-transform: scale3d(1.1,1.1,1.1);
            -ms-transform: scale3d(1.1,1.1,1.1);
            transform: scale3d(1.1,1.1,1.1)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: scale3d(.3,.3,.3);
            -ms-transform: scale3d(.3,.3,.3);
            transform: scale3d(.3,.3,.3)
        }
    }
    
    .bounceOut {
        -webkit-animation-name: bounceOut;
        animation-name: bounceOut;
        -webkit-animation-duration: .75s;
        animation-duration: .75s
    }
    

    1905电影网

    www.1905.com

     

    bounceOutDown

    复制

    展开代码

    @-webkit-keyframes bounceOutDown {
        20% {
            -webkit-transform: translate3d(0,10px,0);
            transform: translate3d(0,10px,0)
        }
    
        40%,45% {
            opacity: 1;
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    }
    
    @keyframes bounceOutDown {
        20% {
            -webkit-transform: translate3d(0,10px,0);
            -ms-transform: translate3d(0,10px,0);
            transform: translate3d(0,10px,0)
        }
    
        40%,45% {
            opacity: 1;
            -webkit-transform: translate3d(0,-20px,0);
            -ms-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            -ms-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    }
    
    .bounceOutDown {
        -webkit-animation-name: bounceOutDown;
        animation-name: bounceOutDown
    }
    

    1905电影网

    www.1905.com

     

    bounceOutLeft

    复制

    展开代码

    @-webkit-keyframes bounceOutLeft {
        20% {
            opacity: 1;
            -webkit-transform: translate3d(20px,0,0);
            transform: translate3d(20px,0,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    }
    
    @keyframes bounceOutLeft {
        20% {
            opacity: 1;
            -webkit-transform: translate3d(20px,0,0);
            -ms-transform: translate3d(20px,0,0);
            transform: translate3d(20px,0,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            -ms-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    }
    
    .bounceOutLeft {
        -webkit-animation-name: bounceOutLeft;
        animation-name: bounceOutLeft
    }
    

    1905电影网

    www.1905.com

     

    bounceOutRight

    复制

    展开代码

    @-webkit-keyframes bounceOutRight {
        20% {
            opacity: 1;
            -webkit-transform: translate3d(-20px,0,0);
            transform: translate3d(-20px,0,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    }
    
    @keyframes bounceOutRight {
        20% {
            opacity: 1;
            -webkit-transform: translate3d(-20px,0,0);
            -ms-transform: translate3d(-20px,0,0);
            transform: translate3d(-20px,0,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            -ms-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    }
    
    .bounceOutRight {
        -webkit-animation-name: bounceOutRight;
        animation-name: bounceOutRight
    }
    

    1905电影网

    www.1905.com

     

    bounceOutUp

    复制

    展开代码

    @-webkit-keyframes bounceOutUp {
        20% {
            -webkit-transform: translate3d(0,-10px,0);
            transform: translate3d(0,-10px,0)
        }
    
        40%,45% {
            opacity: 1;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    }
    
    @keyframes bounceOutUp {
        20% {
            -webkit-transform: translate3d(0,-10px,0);
            -ms-transform: translate3d(0,-10px,0);
            transform: translate3d(0,-10px,0)
        }
    
        40%,45% {
            opacity: 1;
            -webkit-transform: translate3d(0,20px,0);
            -ms-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0)
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            -ms-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    }
    
    .bounceOutUp {
        -webkit-animation-name: bounceOutUp;
        animation-name: bounceOutUp
    }
    

    1905电影网

    www.1905.com

     

    fadeIn

    复制

    展开代码

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0
        }
    
        100% {
            opacity: 1
        }
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0
        }
    
        100% {
            opacity: 1
        }
    }
    
    .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn
    }
    

    1905电影网

    www.1905.com

     

    fadeInDown

    复制

    展开代码

    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-100%,0);
            transform: translate3d(0,-100%,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-100%,0);
            -ms-transform: translate3d(0,-100%,0);
            transform: translate3d(0,-100%,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown
    }
    

    1905电影网

    www.1905.com

     

    fadeInDownBig

    复制

    展开代码

    @-webkit-keyframes fadeInDownBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInDownBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            -ms-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInDownBig {
        -webkit-animation-name: fadeInDownBig;
        animation-name: fadeInDownBig
    }
    

    1905电影网

    www.1905.com

     

    fadeInLeft

    复制

    展开代码

    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            -ms-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft
    }
    

    1905电影网

    www.1905.com

     

    fadeInLeftBig

    复制

    展开代码

    @-webkit-keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInLeftBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            -ms-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInLeftBig {
        -webkit-animation-name: fadeInLeftBig;
        animation-name: fadeInLeftBig
    }
    

    1905电影网

    www.1905.com

     

    fadeInRight

    复制

    展开代码

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInRight {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight
    }
    

    1905电影网

    www.1905.com

     

    fadeInRightBig

    复制

    展开代码

    @-webkit-keyframes fadeInRightBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInRightBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            -ms-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInRightBig {
        -webkit-animation-name: fadeInRightBig;
        animation-name: fadeInRightBig
    }
    

    1905电影网

    www.1905.com

     

    fadeInUp

    复制

    展开代码

    @-webkit-keyframes fadeInUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            -ms-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp
    }
    

    1905电影网

    www.1905.com

     

    fadeInUpBig

    复制

    展开代码

    @-webkit-keyframes fadeInUpBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }
    
    @keyframes fadeInUpBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            -ms-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none
        }
    }
    
    .fadeInUpBig {
        -webkit-animation-name: fadeInUpBig;
        animation-name: fadeInUpBig
    }
    

    1905电影网

    www.1905.com

     

    fadeOut

    复制

    展开代码

    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0
        }
    }
    
    @keyframes fadeOut {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0
        }
    }
    
    .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut
    }
    

    1905电影网

    www.1905.com

     

    fadeOutDown

    复制

    展开代码

    @-webkit-keyframes fadeOutDown {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0)
        }
    }
    
    @keyframes fadeOutDown {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            -ms-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0)
        }
    }
    
    .fadeOutDown {
        -webkit-animation-name: fadeOutDown;
        animation-name: fadeOutDown
    }
    

    1905电影网

    www.1905.com

     

    fadeOutDownBig

    复制

    展开代码

    @-webkit-keyframes fadeOutDownBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    }
    
    @keyframes fadeOutDownBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,2000px,0);
            -ms-transform: translate3d(0,2000px,0);
            transform: translate3d(0,2000px,0)
        }
    }
    
    .fadeOutDownBig {
        -webkit-animation-name: fadeOutDownBig;
        animation-name: fadeOutDownBig
    }
    

    1905电影网

    www.1905.com

     

    fadeOutLeft

    复制

    展开代码

    @-webkit-keyframes fadeOutLeft {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0)
        }
    }
    
    @keyframes fadeOutLeft {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-100%,0,0);
            -ms-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0)
        }
    }
    
    .fadeOutLeft {
        -webkit-animation-name: fadeOutLeft;
        animation-name: fadeOutLeft
    }
    

    1905电影网

    www.1905.com

     

    fadeOutLeftBig

    复制

    展开代码

    @-webkit-keyframes fadeOutLeftBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    }
    
    @keyframes fadeOutLeftBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(-2000px,0,0);
            -ms-transform: translate3d(-2000px,0,0);
            transform: translate3d(-2000px,0,0)
        }
    }
    
    .fadeOutLeftBig {
        -webkit-animation-name: fadeOutLeftBig;
        animation-name: fadeOutLeftBig
    }
    

    1905电影网

    www.1905.com

     

    fadeOutRight

    复制

    展开代码

    @-webkit-keyframes fadeOutRight {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    }
    
    @keyframes fadeOutRight {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(100%,0,0);
            -ms-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0)
        }
    }
    
    .fadeOutRight {
        -webkit-animation-name: fadeOutRight;
        animation-name: fadeOutRight
    }
    

    1905电影网

    www.1905.com

     

    fadeOutRightBig

    复制

    展开代码

    @-webkit-keyframes fadeOutRightBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    }
    
    @keyframes fadeOutRightBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(2000px,0,0);
            -ms-transform: translate3d(2000px,0,0);
            transform: translate3d(2000px,0,0)
        }
    }
    
    .fadeOutRightBig {
        -webkit-animation-name: fadeOutRightBig;
        animation-name: fadeOutRightBig
    }
    

    1905电影网

    www.1905.com

     

    fadeOutUp

    复制

    展开代码

    @-webkit-keyframes fadeOutUp {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-100%,0);
            transform: translate3d(0,-100%,0)
        }
    }
    
    @keyframes fadeOutUp {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-100%,0);
            -ms-transform: translate3d(0,-100%,0);
            transform: translate3d(0,-100%,0)
        }
    }
    
    .fadeOutUp {
        -webkit-animation-name: fadeOutUp;
        animation-name: fadeOutUp
    }
    

    1905电影网

    www.1905.com

     

    fadeOutUpBig

    复制

    展开代码

    @-webkit-keyframes fadeOutUpBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    }
    
    @keyframes fadeOutUpBig {
        0% {
            opacity: 1
        }
    
        100% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            -ms-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    }
    
    .fadeOutUpBig {
        -webkit-animation-name: fadeOutUpBig;
        animation-name: fadeOutUpBig
    }
    

    1905电影网

    www.1905.com

     

    本文由365bet手机在线发布于Web前端,转载请注明出处:Web前端之家,动画已丢

    关键词:

上一篇:post方法的简单实例

下一篇:Web前端之家