CSS3之动画

CSS

CSS3动画分为transition功能和animation功能，transition来实现属性值的开始值和结束值之间的平滑过渡动画，而animation能在样式中创建多个关键帧，在关键帧中编写样式。

一、transition功能

1.transition属性

transition: property duration timing-function delay

property指属性值，duration值动画时间，timing-function指动画方式；也可以分开写：transition-property： width；，delay指transition的延迟执行时间。

div{
    width: 200px;
    height: 200px;
    background-color: red;
    transition: background-color 1s linear;//线性变化
    -webkit-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
}
div:hover{
    background-color: black;
}

2.用transition过渡实现transform变形

div{
    width: 200px;
    height: 200px;
    background-color: red;
    -webkit-transition: transform 2s linear;
}
div:hover{
    transform: translate(50px,50px);
}

3.多个属性同时过渡
若transiton-property几个属性分开写，则几个属性会先后变化（长宽会先后变化，但长与颜色会同时变化）

div{
    width: 80px;
    height: 80px;
    background-color: green;
    transition: all 1s linear;//几个属性同时过渡
}
div:hover{
    width: 40px;
    height: 200px;
    background-color: red;
}

二、Animation功能

1.相关属性
1）animation-iteration-count:指定动画播放的次数，若值为infinite，则是不停地循环播放

2)timing-function:linear(线性速度)、ease-in(开始慢，然后逐渐加速)、ease-out（开始快，然后逐渐变慢）、ease（开始慢，然后加快，最后再变慢）

2.实例
myColor是关键帧几何的名称

    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        -webkit-animation: myColor 5s linear;//transition类似
        -webkit-animation-iteration-count:infinite;//无限循环播放
    }

    @-webkit-keyframes myColor{
        0%{//开始帧
            background-color: red;
        }
        30%{
            background-color: yellow;
        }
        65%{
            background-color: blue;
        }
        100%{//结束帧
            background-color: black;
        }
    }

animation属性可以写在元素样式里，也可以写在元素的hover样式里