css3动画

整理自阮一峰的网络日志

1

2

3

4

5

6

a

心跳

c

d

e

f

g

h

A

B

.

/*  IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。  */

        .hov div{
            display: inline-block;
            color: #f33;
            text-align: center;
            font-size: 1.5em;
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }


        /* ==========   transition  ============ */
        .hov div:hover {
            width: 200px;
            height: 200px;
            color: #3f3;
        }

        .anim2 {
            transition: 1s;     
            /*   加上以后样式为渐变式, 而不是立刻有效 */
        }

        .anim3 {
            transition: 1s width;
            /* 只对宽度应用动画, 高度则立即变化. 所以transition: 1s height, 1s width; 等价与 transition: 1s */
        }

        .anim4 {
            transition: 1s width, 1s 1s height;     
            /*  在宽度动画完成以后延迟1s再执行高度动画  */
        }

        .anim5 {
            transition: 1s cubic-bezier(.83,.97,.05,1.44);
            
            /*
                ease:默认, 逐渐放慢; linear:匀速; ease-in:加速;   ease-out:减速; cubic-bezier函数:自定义速度模式
            
                ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
                linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
                ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
                ease-out: cubic-bezier(0, 0, 0.58, 1.0)
                ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
                
                http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
            */
        }

        .anim6 {
            transition-property: height;
            transition-duration: 1s;
            transition-delay: 1s;
            transition-timing-function: ease;
            
            /*  等价于 transition: 1s 1s height ease;  */
        }



        /*  =======  animation    =============*/

        .auto div{
            display: inline-block;
            color: #f33;
            text-align: center;
            font-size: 1.5em;
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }

        /* 可以插入更多状态, 10%,15%... */
        @keyframes gogogo {
            0%{transform:scale(0.8,0.8);}
            50%{transform:scale(1.2,1.2);}
            100%{transform:scale(0.8,0.8);}
        }

        @-moz-keyframes gogogo {
            0%{-moz-transform:scale(0.8,0.8);}
            50%{-moz-transform:scale(1.2,1.2);}
            100%{-moz-transform:scale(0.8,0.8);}
        }

        @-o-keyframes gogogo {
            0%{-o-transform:scale(0.8,0.8);}
            50%{-o-transform:scale(1.2,1.2);}
            100%{-o-transform:scale(0.8,0.8);}
        }

        @-webkit-keyframes gogogo {
            0%{-webkit-transform:scale(0.8,0.8);}
            50%{-webkit-transform:scale(1.2,1.2);}
            100%{-webkit-transform:scale(0.8,0.8);}
        }

        .anm1:hover {   
         -webkit-animation:gogogo 1s infinite linear;
           -moz-animation:gogogo 1s infinite linear;
            -ms-animation:gogogo 1s infinite linear;
             -o-animation:gogogo 1s infinite linear;
                animation:gogogo 1s infinite linear;
            
            /*  infinite: 无限次播放, 也可以指定具体播放次数, 如: 3  */
        }


        @-webkit-keyframes pound{
            from { -webkit-transform: none; }
          to { -webkit-transform: scale(0.7); }
        }

        .anm2, .anm4{
            border-radius:50%;
            color:white !important;
            background-color: #f33 !important;
            
            -webkit-animation:pound 0.6s infinite;
        }


        @-webkit-keyframes radius {
            from{}
            to{ border-radius: 50%;}
        }
        .anm3 {
            -webkit-animation:radius 1s forwards;   
            

            /*  动画结束以后，默认会立即从结束状态跳回到起始状态
                    forwards: 使得效果停留在结束状态上
                none：默认值，回到动画没开始时的状态
                    backwards：让动画回到第一帧的状态
                    both: 根据animation-direction轮流应用forwards和backwards规则
            */
        }


        .anm4{
            -webkit-animation:pound 1s infinite alternate;
            
            
            /*  默认动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。
                    animation-direction属性，可以改变这种行为。
            
                    normal: 1-2-3(1)-2-3(1)-2-3
                    alternate: 1-2-3-2-1-2-3
                    reverse: 3-1-1(3)-2-1(3)-2-1
                    alternate-reverse: 3-2-1-2-3-2-1
            
            最常用的值是normal和reverse, 浏览器对其他值的支持情况不佳
            */
        }


        @-webkit-keyframes rainbow {
            0%{background: #ccc}
            100%{background: orange}

            /*keyframes写法很自由,
                0% 可以用 from 代替
                100% 可以用 to 代替
            
                from或to可以不写, 浏览器会自动推算
            
                甚至可以把多个状态写在一行
                from，to { transform: none; }
                50% { transform: scale(1.2); }
            */
        }
        .anm5{
            -webkit-animation-name: rainbow;
          -webkit-animation-duration: 1s;
          -webkit-animation-timing-function: linear;
          -webkit-animation-delay: 3s;
          -webkit-animation-fill-mode:forwards;
          -webkit-animation-direction: normal;
          -webkit-animation-iteration-count: 3;
            
            /*  等价于 -webkit-animation: 1s 3s rainbow linear 3 forwards normal;  */
        }


        .anm6{
            -webkit-animation: 1s 3s rainbow 3 steps(4) forwards;
            
            /*  浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡  */
        }   


        @-webkit-keyframes bg {
            50% {background: orange}
        }
        .anm7{
            -webkit-animation:pound 1s infinite alternate, bg 0.5s infinite alternate;
            
            /*  多个动画叠加执行  */
        }


        .anm8{
            -webkit-animation:gogogo 1s infinite alternate;
            -webkit-animation-play-state: paused;
        }
        .anm8:hover{
            -webkit-animation-play-state: running;
            
            /*  动画播放过程中动画可能会突然停止, 这时默认行为是跳回到动画的开始状态, 如a元素,
                    如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。如h元素
            */
        }



        /*==========   transform  ========== */
        .trans div {
            display: inline-block;
            width: 100px;
            height: 30px;
            background: #ccc;
            color: red;
            text-align: center;
        }

        .trs1 {
            -webkit-transform: rotate(-30deg) skew(45deg) scale(0.8) translate(50px,-30px);
        }


        .trs2{
                -webkit-transition:all 1s ease-in-out;
        }
        .trs2:hover {
            -webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
        }


        @-webkit-keyframes spin{
            to{-webkit-transform:rotate(360deg)}
        }
        .trs3 {
            height: 100px !important;
            font-size:3em;
            line-height: 3%;
            border-radius: 50%;
            
            -webkit-animation:spin 2s infinite linear;
        }



        /*==============    loading demo    ================*/
        .loading {
            padding-left: 50px;
        }
        .loading div {
            width: 30px;
            height: 30px;
            background: #ccc;
            display: inline-block;
            border-radius: 50%;
        }

        @-webkit-keyframes loading {
          0%, 80%, 100% { -webkit-transform: scale(0.0) }
          40% { -webkit-transform: scale(1.0) }
        }

        .ld1 {
            -webkit-animation:loading 1.4s -0.32s infinite linear alternate;    
        }
        .ld2 {
            -webkit-animation:loading 1.4s -0.16s infinite alternate;   
        }
        .ld3 {
            -webkit-animation:loading 1.4s infinite alternate;
        }