css3

来源：互联网发布：都怪本泽马什么梗知乎编辑：程序博客网时间：2024/06/16 11:00

在css3中除了可以使用Transitions功能实现动画效果之外，还可以使用Animations功能实现更为复杂的动画效果，Safari 4 以上浏览器与Chrome 2 以上浏览器对该功能提供支持。

Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果。它们的区别在于，使用Transitions功能时只能通过制定属性的开始值与结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；而Animatios则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

动画功能 Transitions Animations 区别使用Transitions功能时只能通过制定属性的开始值与结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果； Animatios则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

1.一个属性值发生改变

在线演示鼠标悬停时背景颜色发生变化

html：

<div>示例文字</div>

css：

<style>    div {      background-color: red;    }    @-webkit-keyframes mycolor { /* 关键帧的集合名是 mycolor */      0% {        background-color: red;      }      40% { /* 40%表示该帧位于整个动画过程中的40%处 */        background-color: darkblue;      }      70% {        background-color: yellow;      }      100% {        background-color: red;      }    div:hover { /* 上面创建好关键帧后在元素的样式中使用关键帧集合 */      -webkit-animation-name: mycolor;/* 指定关键帧集合名称 */      -webkit-animation-duration: 5s;/* 完成整个动画所花费的时间 */      -webkit-animation-timing-function: linear;/*指定实现动画的方法*/    }</style>

解析：使用Animations功能的时候，如果使用的时Safari或者Chrome浏览器，要使用如下所示的方法来创建关键帧的集合：@-webkit-keyframes 关键帧集合名 {创建关键帧的代码}

2.多个属性值同时改变

在线演示

html：

<div>示例文字</div>

css：

<style>    div {      margin: 100px auto;      width: 300px;      height: 200px;      background-color: yellow;    }    @-webkit-keyframes mycolor {      0% {        background-color: red;        -webkit-transform: rotate(0deg);      }      40% {        background-color: darkblue;        -webkit-transform: rotate(30deg);      }      70% {        background-color: yellow;        -webkit-transform: rotate(-30deg);      }      100% {        background-color: red;        -webkit-transform: rotate(0deg);      }    }    div:hover { /* 鼠标悬停动画开始执行 */      -webkit-animation-name: mycolor;      -webkit-animation-duration: 5s;      -webkit-animation-timing-function: linear;    }</style>

3.多个属性值动画不停的循环播放

在上一段代码的基础上，把div:hover{}中的代码更改为如下代码；当鼠标放在div元素上，动画就会一直不停播放；

在线演示

div:hover {      -webkit-animation-name: mycolor;      -webkit-animation-duration: 5s;      -webkit-animation-timing-function: linear;      -webkit-animation-iteration-count: infinite;/* 动画不停循环播放 */      }

如果直接给元素添加样式，则页面打开就会自动播放；如下：

在线演示

div { /*直接添加*/      -webkit-animation-name: mycolor;      -webkit-animation-duration: 5s;      -webkit-animation-timing-function: linear;      -webkit-animation-iteration-count: infinite; /* 动画不停循环播放 */       }

4.实现动画的方法

方法变化速度 linear 动画开始到结束匀速进行 ease-in 动画开始时速度很慢，然后速度加快 ease-out 动画开始时速度很快，然后速度放慢 ease 动画开始时速度很慢，然后速度加快，然后速度放慢 ease-in-out 动画开始时速度很慢，然后速度加快，然后速度放慢

动画小例子

在线演示动画先快后慢

html:

<div></div>

css：

<style>      @-webkit-keyframes mycolor {        0% {            width: 100px;            height: 100px;        }        100% {            width: 500px;            height: 500px;        }      }      div {        background-color: red;        width: 500px; /*如果不加宽和高，那么动画结束，页面是空白；添加之后动画结束显示500px*/        height: 500px; /*如果不加宽和高，那么动画结束，页面是空白*/        -webkit-animation-name: mycolor; /* 指定关键帧集合名称 */        -webkit-animation-duration: 5s; /* 完成整个动画所花费的时间 */        -webkit-animation-timing-function: ease-out; /*指定实现动画的方法*/      }</style>

0 0