CSS3動畫，過渡效果animation、@keyframes、transform、transition

CSS3 @keyframes 規則

如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。

@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。

瀏覽器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

註釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

實例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
/*注：下面的寫法將不再寫 -webkit- 和 -moz- */

或者用%表示時間段

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

注意：當您在 @keyframes 中創建動畫時，需要把它捆綁到某個選擇器，否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱
規定動畫的時長

實例

把 “myfirst” 動畫捆綁到 div 元素，時長：3 秒：

div{
animation: myfirst 3s;
}

其中animation有6個屬性

• animation-name 規定 @keyframes 動畫的名稱
• animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0
• animation-timing-function 規定動畫的速度曲線。默認是 “ease” 。 4個屬性：ease、ease-in、ease-out、ease-in-out
• animation-delay 規定動畫何時開始。默認是 0
• animation-iteration-count 規定動畫被播放的次數。默認是 1。 2個屬性：n(次數，不填寫即爲1)和infinite（無限次）
• animation-direction 規定動畫是否在下一週期逆向地播放。默認是 “normal”。 2個屬性：normal（正常循環播放，可不填）和alternate（結束後輪流反向播放）
  所有屬性可以合起來寫

div {
animation: myfirst 5s linear 1s infinite alternate;
}

動畫名稱、動畫時間5s、動畫速度:勻速、延遲開始時間：1s、動畫播放次數：無限次、動畫完成後下一週期：輪流反向播放。

CSS3 transform變形轉換

CSS3 transform是什麼？

transform的含義是：改變，使…變形；轉換

CSS3 transform都有哪些常用屬性？

transform的屬性包括：

• rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。

下面我們來分解各個屬性的用法：

transform:rotate()：

含義：旋轉；其中“deg”是“度”的意思，如“10deg”表示“10度”。

.demo_transform1{
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

transform:skew()：

含義：傾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。

.demo_transform2{
    transform:skew(20deg);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
}

transform:scale(x,y)：

含義：比例；可傳2個值，當寫一個時，表示xy都一樣，“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則爲負“-”。

.demo_transform2{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
}

transform:translate(x,y)：

含義：變動，位移；可以傳3個值，x、y。

也可以寫成 translateX( ), translateY( ).

如表示向右位移100像素，即第一個值爲100px，如果向上位移，把後面的“0”改個值就行，向左向下位移則爲負“-”。

.demo_transform2{
    transform:translate(100px,0);
    -webkit-transform:translate(100px,0);
    -moz-transform:translate(100px,0);
}

或者

.demo_transform2{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
}

CSS3 transition 過度效果

當鼠標經過時，寬度邊爲300px,時長爲 2 秒：

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
}
div:hover {
width:300px;
}

transition有4個屬性:

• 1、transition-property：規定應用過渡的 CSS 屬性的名稱。with可獲得寬度屬性，height可獲得高度屬性，transform可獲得動畫屬性，all 可以獲取所有屬性，所以推薦寫all

• 2、transition-duration：定義過渡效果花費的時間。默認是 0。

• 3、transition-timing-function：規定過渡效果的時間曲線。默認是 “ease”。有5個屬性，分別爲：

1. linear–勻速 規定以相同速度開始至結束的過渡效果
2. ease–慢-快-慢 規定慢速開始，然後變快，然後慢速結束的過渡效果
3. ease-in–慢-快 規定以慢速開始的過渡效果
4. ease-out–快-慢 規定以慢速結束的過渡效果
5. ease-in-out–慢-快-慢 規定以慢速開始和結束的過渡效果

• 4、transition-delay：規定過渡效果何時開始。默認是 0。

4個屬性可以合起來寫

div{
    transition: all 1s linear .5s;
}

4個屬性分別表示：所有屬性都有動作效果、動作時間爲1S、速度爲勻速、延遲0.5S開始動畫

---

轉自 https://www.cnblogs.com/shiweida/p/7785185.html