在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定義關鍵幀

實現動畫的方法