CSS自学笔记（14）:CSS3动画效果

在CSS3中也新增了一些能够对元素创建动画处理的属性。通过这些新增的属性，我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果，我们就可以取代网页中的动态图片、flash动画和JavaScript了。

CSS3中新增的动画效果的属性以及主流浏览器支持情况

属性	浏览器支持
transition	IE	Firefox	Chrome	Safari(-webkit-)	Opera
@keyframes	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera
animation	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera

注：

IE9以及更早版本不支持这三个新增属性。
在Safari浏览器中，需要加(-webkit-)前缀。
在Chrome浏览器中，@keyframes和animation属性需要加(-webkit-)前缀。

transition属性

属性	描述	默认值
transition	简写，用于在一个属性中设置四个过渡属性。	无
transition-property	定义过渡效果的 CSS 属性的名称。	无
transition-duration	定义过渡效果所用时间。	0
transition-timing-function	定义过渡效果的时间曲线。	ease
transition-delay	定义过渡效果开始时间。	0

下面是一个简单的CSS样式

img {

    width: 90px;

    height: 90px;

    transition-property: width, height, transform;

    transition-duration: 1s, 1s, 1s;

    transition-timing-function: ease-in-out, ease-in, ease-out;

    transition-delay: 1s, 1s, 0s;

}

img:hover{

    width: 200px;

    height: 200px;

    transform: rotate(90deg);

}

实现效果是当鼠标悬浮在元素(img)上时，他的宽度、高度和方向会发生变化，过渡时间都为1s，过渡方式分别为ease-in-out, ease-in和ease-out，旋转效果会立刻执行，而高宽操作会在1s后变化。

当鼠标移出元素所在范围时，它会逐渐变回原来的样式。

我们也可以transition简写来完成定义上面的样式：

img {

    width: 90px;

    height: 90px;

    transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;

}

img:hover{

    width: 200px;

    height: 200px;

    transform: rotate(90deg);

}

我们还可以通过@keyframes规定来创建动画规则，通常用在较为复杂而又无需用到False动画和JavaScript的地方。

例如下面一个简单的动画效果

动画效果

部分CSS样式代码为：

#my_animate {

    width: 60px;

    height: 60px;

    background: #060;

    color: #fff;

    position: relative;

    font: bold 12px '微软雅黑';

    padding: 20px 10px 0px 10px;

    animation: my_animate 5s infinite;

}

@keyframes my_animate {

 0%   {transform: rotate(0deg);left:0px;}

 25%  {transform: rotate(90deg);left:0px;}

 50%  {transform: rotate(0deg);left:400px;}

 55%  {transform: rotate(0deg);left:400px;}

 70%  {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;}

 100% {transform: rotate(-360deg);left:0px;}

}

使用@keyframes创建动画时，需要绑定一个选择器。创建动画时至少要定义动画的名称和动画的时长，这样即可将@keyframes创建动画绑定到相应的选择器上。

若在创建动画时没有定义时长，那么就会取默认值0，就不会执行动画效果。

animation属性以及说明

属性	描述	说明
@keyframes	创建动画规则
animation	定义动画简写属性	除了 animation-play-state 属性
animation-name	定义 @keyframes 动画的名称
animation-duration	定义动画完成一个周期所花费时间(秒或者毫秒)	默认值：0
animation-timing-function	定义动画的速度曲线	默认值：ease
animation-delay	定义动画何时开始	默认值：0
animation-iteration-count	定义动画被播放的次数	默认值：1
animation-direction	定义动画是否在下一周期逆向地播放	默认值：normal
animation-play-state	定义动画是否正在运行或暂停	默认值：running
animation-fill-mode	定义对象动画时间之外的状态

上面的定义的动画效果是一个周期5s，并且进行无限次的循环播放。在@keyframes中规定了动画的6各阶段的样式，最终形成一个简单的动画效果。