CSS3动画属性animation的用法

本文以CSS3的动画属性为例，为大家分析动画属性animation的使用方法，阅读完整文相信大家对CSS3动画属性animation的使用方法有了一定的认识。

animation动画

（1）@keyframes 定义关键帧动画
（2）animation-name 动画名称
（3）animation-duration 动画时间
（4）animation-timing-function 动画曲线linear（匀速）| ease（缓冲）| step（步数）
（5）animation-delay 动画延迟
（6）animation-iteration-count 动画播放次数n | infinite
（7）animation-direction 动画结束后是否反向还原 normal | alternate
（8）animation-play-state 动画状态 paused（停止）| running（运动）
（9）animation-fill-mode 动画前后的状态 none（缺省）| forward(结束时停留在最后一帧) | backwards（开始时停留在定义的开始帧）| both（前后都应用）
（10）animation：name duration timing-function delay iteration-count direction；同时设置多个属性

例子一：

例子二：loading

    

    

    

    

    

    
loading.........

2.CSS3新增选择器

E:nth-child(n)：匹配元素类型为E，且是父元素的第n个。

3.CSS3圆角、rgba

(1)圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时设置四个角：
border-radius：20px 10px 30px 50px;

设置四个圆角相同：
border-radius：50%;

4.rgba(新的颜色值表示法)

（1）盒子透明表示法：

.box{
width: 300px;
height: 300px;
background-color: #000000;
margin: 50px auto;

/*透明完整写法,整个盒子透明*/
    opacity: 0.3;
    filter: alpha(opacity=30);
}
.box01{
    width: 300px;
    height: 300px;
    /*第二种写法，仅背景透明*/
    background-color: rgba(0,0,0,0.5);
    margin: 50px auto;

    /*透明完整写法*/
    /*opacity: 0.3;
    filter: alpha(opacity=30);*/
}

上文描述的就是CSS3动画属性animation的用法，具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容，欢迎关注编程笔记行业资讯频道！