CSS3——动画功能

来源：互联网发布：金融数据挖掘马超群编辑：程序博客网时间：2024/05/16 07:16

transition补间动画
- 参数说明
- 案例
Animations帧动画
- 使用步骤一
- 使用步骤二
- 案例

transition（补间动画）

参数说明：

第一个参数：执行变换的属性
none：所有属性
all：所有属性
某个属性：固定某个属性,多个属性中间的写法：

transition: all 1s linear 0s,width 1s linear 0s

第二个参数：变换延续的时间
单位为秒（s）或毫秒（ms）

第三个参数：变换速率的变化方式
linear:匀速
ease:逐渐变慢
ease-in：加速
ease-out:逐渐减速
ease-in-out：加速后减速
coblic-bezier(n.n,n.n) : 贝兹曲线中的绘制方法，两个值分为两个点的坐标

第四个参数：变换延迟的时间
单位为秒（s）或毫秒（ms）
执行变换之前的延迟时间

案例：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>transition属性</title>    <style>        div{            width: 200px;            height: 200px;            background-color: green;            /*兼容性写法*/            transition: all 1s linear 0s,width 1s linear 0s;            -moz-transition:all 1s linear 0s ;            -webkit-transition:all 1s linear 0s ;            -o-transition:all 1s linear 0s ;        }        div:hover{            background-color: #ff6600;            /*-moz-transition: ;            -webkit-transition: ;            -o-transition: ;*/        }    </style></head><body><div></div></body></html>

Animations（帧动画）

使用步骤一：

加载关键帧

@-webkit-keyframes name{   0%{     /*动画开始时的状态*/     …   }   10%{     /*动画进行到10%的状态*/     …   }   20%{     /*动画进行到20%的状态*/     …   }     …   100%{      /*动画进行到100%的状态*/      ...   }}

使用步骤二：

使用关键帧

元素{-webkit-animation-name: mycolor;/*选择关键帧*/-webkit-animation-duration: 5s;/*帧动画执行时间*/-webkit-animation-timing-function: linear;/*帧动画执行速度*/-webkit-animation-iteration-count: infinite;/*帧动画执行次数，infinite为无线循环执行*/}

案例：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 300px;            height: 100px;            background-color: #ff6600;        }        /*封装关键帧*/        @-webkit-keyframes mycolor {           0%{               background-color: #ff6600;           }            10%{                background-color: green;            }            20%{                background-color: red;            }            80%{                background-color: #000000;            }            100%{                background-color: #ff6600;            }         }        div:hover{            -webkit-animation-name: mycolor;            -webkit-animation-duration: 5s;            -webkit-animation-timing-function: linear;            -webkit-animation-iteration-count: infinite;        }    </style></head><body><div></div></body></html>

1 0