html5和css3新特性之动画

    此处总结动画及私有前缀。


(一)动画

    动画需要先定义,再调用。

1.定义动画

1)连续动画的定义

@keyframes 动画名字 {

        from {

            //动画开始之前的状态

        }

        to {

            //动画结局的状态

        }

    }

2)分步多状态动画的定义

    @keyframes 动画名字 {  

        0% {

            开始状态

        }

        50%{

            中间状态

        }

        100% {

            结束状态

        }

    }

2.调用动画

语法 => animation: 动画名称 动画时长 其他属性值;

    谁用动画就给谁加调用。动画名称及动画时长必须有,其他属性值随意且顺序也随意。

html5和css3新特性之动画_第1张图片
动画属性

将上表做一个分析解释:

    动画的名字 animation-name: dh;

    动画的时间 animation-duration: 5s;

    动画速度曲线(匀速或其他) animation-timing-function: linear匀速; 默认ease表示缓冲;steps(5)按步分5次走

    动画延迟多久后执行 animation-delat: 3s; 默认为0s

    动画播放次数 animation-iteration-count: 2; 无限次为infinite

    动画是否逆向播放 animation-direction: alternate; 默认normal

    动画暂停 animation-play-state: paused; 默认running运动

    动画结束后的状态 animation-fill-mode: forwards保持当前状态;backwords回到起始状态

代码举栗:


   

       

           

       

       

           

       

       

           

       

       

           

       

   

html5和css3新特性之动画_第2张图片
效果截图

    敲了一下午的代码,动画还是掌握的不是很好。冲鸭!继续敲~


(二)私有前缀

    浏览器厂商通常都是在属性名称前添加厂商的私有前缀,来测试这些尚未成为标准的特性。 因此,可以借助私有前缀,来解决浏览器对CSS3的兼容性问题。

html5和css3新特性之动画_第3张图片

代码举栗:

.box{

    -webkit-transition:all 1s;

    -moz-transition:all 1s;

    -ms-transition:all 1s;

    -o-transition:all 1s;

    transition:all 1s;

}

/*推荐使用 先前缀后标准 顺序*/

    再比如,在使用背景颜色渐变的属性时,也要加前缀:

-webkit-background: linear-gradient(top, red, pink);

你可能感兴趣的