css3動畫由淺入深總結

一：過渡動畫---Transitions

 

含義：在css3中，Transitions功能經過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另外一個屬性值來實現動畫功能。

Transitions屬性的使用方法以下所示：

transition: property | duration  | timing-function | delay

transition-property: 表示對那個屬性進行平滑過渡。

transition-duration: 表示在多長時間內完成屬性值的平滑過渡。

transition-timing-function 表示經過什麼方法來進行平滑過渡。

transition-delay: 定義過渡動畫延遲的時間。

默認值是 all  0  ease  0

瀏覽器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+

HTML代碼以下：

<div class="transitions">transitions過渡功能</div>
CSS代碼以下：

.transitions {
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
}.transitions:hover {
    background-color: #00ffff;
}

若是想要過渡多個屬性，能夠使用逗號分割，以下代碼：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 咱們能夠使用Transitions功能同時平滑過渡多個屬性值。

以下HTML代碼：

<h2>transitions平滑過渡多個屬性值</h2><div class="transitions2">transitions平滑過渡多個屬性值</div>
css代碼以下：

.transitions2 {
        background-color:#ffff00;
        color:#000000;
        width:300px;
        -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}.transitions2:hover {
        background-color: #003366;
        color: #ffffff;
        width:400px;
}

transitions平滑過渡多個屬性值

注意：transition-timing-function 表示經過什麼方法來進行平滑過渡。它值有以下：

有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

至於linear 線性咱們很好理解，能夠理解爲勻速運動，至於cubic-bezier貝塞爾曲線目前用不到，能夠忽略不計，咱們如今來理解下 ease, ease-in, easy-out 和 ease-in-out 等屬性值的含義；

ease: 先快後逐漸變慢；

ease-in: 先慢後快

easy-out: 先快後慢

easy-in-out: 先慢後快再慢

理解上面幾個屬性值，以下demo：

HTML代碼以下:

<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div></div>
CSS代碼以下：

.trans_box {
    background-color: #f0f3f9;
　　width:100%
}.trans_list {
    width: 30%;
    height: 50px;
    margin:10px 0;
    background-color:blue;
    color:#fff;
    text-align:center;
}.ease {
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}.ease_in {
    -webkit-transition: all 4s ease-in;
    -moz-transition: all 4s ease-in;
    -o-transition: all 4s ease-in;
    transition: all 4s ease-in;
}.ease_out {
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}.ease_in_out {
    -webkit-transition: all 4s ease-in-out;
    -moz-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}.linear {
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    transition: all 4s linear;
}.trans_box:hover .trans_list{
    margin-left:90%;
    background-color:#beceeb;
    color:#333;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

二：Animations功能

Animations功能與Transitions功能相同，都是經過改變元素的屬性值來實現動畫效果的。它們的區別在於：使用Transitions功能是隻能經過指定屬性的開始值與結束值。而後在這兩個屬性值之間進行平滑過渡的方式來實現動畫效果，所以不能實現複雜的動畫效果；而Animations則經過定義多個關鍵幀以及定義每一個關鍵幀中元素的屬性值來實現更爲複雜的動畫效果。

語法：animations: name duration timing-function iteration-count;

name: 關鍵幀集合名（經過此名建立關鍵幀的集合）

duration: 表示在多長時間內完成屬性值的平滑過渡

timing-function: 表示經過什麼方法來進行平滑過渡

iteration-count: 迭代循環次數，可設置爲具體數值，或者設置爲infinite進行無限循環，默認爲1.

用法：@-webkit-keyframes 關鍵幀的集合名 {建立關鍵幀的代碼}

以下面的代碼：

@-webkit-keyframes mycolor {
   0% {background-color:red;}
   40% {background-color:darkblue;}
   70% {background-color: yellow;}
   100% {background-color:red;}}
.animate:hover {
   -webkit-animation-name: mycolor;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function:
}