CSS3中的动画功能

在CSS3中主要依靠transitions和animations实现动画功能

Transtions

• 主要用法
  transitions:property duration timing-function
• property表示要更改的属性，duration表示更改所用时间，timing-function表示过渡方式，一般使用linear使用相同时速度平滑过渡，举个栗子

div{
    position: absolute;
    left:10px;
    width: 100px;
    background-color: red;
    -webkit-transition: left 2s linear;
}
div:hover{
    left:200px;
}

• 也可以将这个属性拆分来写

div{
    position: absolute;
    left:10px;
    width: 100px;
    background-color: red;
    -webkit-transition-property: left;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear ;
}
div:hover{
    left:200px;
}

• 也可以使用该属性值同时过渡多个值

div{
    position: absolute;
    left:10px;
    width: 100px;
    background-color: red;
    -webkit-transition: left 2s linear,background-color 2s linear;
}
div:hover{
    left:200px;
    background-color: darkblue;
}

Animations

• animations与属性transitions最大的区别就是animations通过定义多个关键帧来实现更加复杂的动画，举个例子

div {
    position: absolute;
    left:10px;
    width:200px;
    background-color: red;
}

@-webkit-keyframes mycolor {
    0% {
        left: 10px;
        background-color: red;
    }
    25% {
        left:200px;
        background-color: darkblue;
    }
    50% {
        left: 400px;
        background-color: yellow;
    }
    75%{
        left: 200px;
        background-color: darkblue;
    }
    100% {
        left:10px;
        background-color: red;
    }
}

div:hover {
    -webkit-animation: mycolor 5s linear;
    -webkit-animation-iteration-count: infinite;
}

• firefox使用@-moz-keyframes定义关键帧

实现动画的方法

方法	描述
linear	动画速度保持不变
ease-in	先慢后快
ease-out	先快后慢
ease	慢-快-慢
ease-in-out	同上