CSS3新特性詳解(四)：CSS3過度transition和動畫animation @keyframes規則詳解

繼上篇“CSS3新特性詳解(三)：CSS3 2D轉換和3D轉換 transform 變形使用詳解 ”後，本文繼續CSS3剩餘部分：CSS3的過渡transition和動畫animation屬性。曾幾何時我們要在頁面上實現動畫只能：

做個flash動畫或gif圖片；
js動畫，比如要實現元素水平位移動畫，可以搞個定時器，元素的left從 -1000px 開始每隔 200ms 增加 100px。

現如今，我們只要使用CSS3的transition、animation屬性及@keyframes定義，就可以輕鬆實現元素的動畫效果。下面讓我們一起看下transition、animation屬性的使用詳解。

一、transition 過渡

CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。語法定義上transition有兩種實現方式：

使用transition簡寫屬性
使用transition-property、transition-duration、transition-timing-function和transition-delay組合屬性。

1、transition簡寫屬性

語法： transition: property duration timing-function delay;
參數說明：

property：none|all|css屬性，如height，width等；

duration：過渡時長，可以是秒或毫秒，1s表示1秒，500ms表示500毫秒；

timing-function：時間曲線函數，如：linear，ease，ease-in等；

delay：延遲時間，1s表示1秒後進行過渡動畫。

案例：

transition: margin-right 2s; /* 過渡效果作用在margin-right屬性上，持續2秒 */
transition: margin-right 2s .5s;  /* 變換效果延遲0.5秒執行 */
transition: margin-right 2s ease-in-out; /* 變換效果時間曲線函數採用 ease-in-out */
transition: margin-right 2s ease-in-out .5s; /* 變換效果時長2秒，時間曲線函數ease-in-out，延遲0.5秒執行 */
transition: margin-right 2s, color 1s; /*多個屬性變換效果用 逗號 分隔*/
transition: all 1s ease-out; /*所有屬性都有變換效果，持續1秒*/

2、使用transition-property、transition-duration、transition-timing-function和transition-delay組合屬性

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

變換效果在width屬性上，效果時長1秒，時間曲線函數爲linear，延遲2秒執行。

1）transition-property，應用過渡的 CSS 屬性的名稱

語法： transition-property: none|all| property; 默認值all

none，沒有屬性會獲得過渡效果；

all，所有屬性都將獲得過渡效果；

property，定義應用過渡效果的 CSS 屬性名稱，多個屬性以逗號分隔。

2）transition-duration，完成過渡效果需要花費的時間

語法： transition-duration: time;
說明： 完成過渡效果需要花費的時間（以秒或毫秒計）。默認值是 0，表示沒有動畫效果。

3）transition-timing-function 過渡效果的時間曲線函數

語法： transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 默認值ease
各曲線函數說明：

linear，勻速變換（等於 cubic-bezier(0,0,1,1)）。

ease，慢–快--慢過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in，以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。

ease-out 以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。

ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

4）transition-delay 動畫延遲，指定何時開始過渡效果

語法： transition-delay: time;
說明： transition-delay值以秒爲單位（S）或毫秒（ms），默認值0，沒有延遲。

3、transition 過渡動畫生效的2個必要參數

transition-property 不能是none，可以不設置（默認all）
transition-duration 必須設置，因爲其默認值是0

transition案例，請參考本文最後案例代碼部分。

二、animation 動畫

方便理解，先看個簡單的案例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div:hover {animation: myfirst 2s}

div鼠標移上去會有背景色從紅色漸變到黃色的動畫過渡效果，持續2秒。我們可以看出，要實現animation 動畫效果，需要2步：

定義@keyframes 規則
使用animation屬性，animation可以採用簡寫方式，也可以採用animation-name、animation-duration等複合方式。

1、@keyframes 規則定義

@keyframes規則定義了動畫是怎麼動的，如上文的背景色變換，假設我們定義的是top屬性變動則可以實現元素上下運動等。

語法：@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

一個案例：

@keyframes myfirst{
	0%   {background: red; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:200px;}
	75%  {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
}
div:hover{animation: myfirst 4s;}

案例說明，這個動畫時長4s：

0% 動畫開始，background: red; left:0px; top:0px;

25% 動畫進行到4s*25% = 1s，background: yellow; left:200px; top:0px;

50% 動畫進行到4s*50% = 2s，background: blue; left:200px; top:200px;

75% 動畫進行到4s*75% = 3s，background: green; left:0px; top:200px;

100% 動畫結束，background: red; left:0px; top:0px;

2、animation 屬性詳解

從語法定義上來說，實現animation動畫，有2種方式：

animation：簡寫方式，除了 animation-play-state 屬性，其它屬性都可以實現

animation-name，animation-duration等組合方式

2.1 animation 簡寫方式

語法： animation: name duration timing-function delay iteration-count direction;

說明： 默認值爲：none 0 ease 0 1 normal；

name必須指定，否則沒有動畫效果；

duration必須指定，其默認值是0；

簡寫方式不能設置animation-play-state屬性。

一個案例：

animation:mymove 5s infinite; /* 動畫無限播放 */
animation:mymove 5s 3; /* 動畫播放3次 */
animation:mymove 5s 3 alternate; /* 1,3次正向播放；第2次反向播放 */

2.2 animation-* 複合方式

animation-name:mymove;
animation-duration:5s;

類似上述css，每項animation-*單獨設置，我們稱之爲複合方式，常用的共有6個屬性，具體如下：

1）animation-name，需要綁定到選擇器的 keyframe 名稱

語法： animation-name: keyframename|none;

說明： keyframename @keyframes 名稱，默認值“none”，參數必須指定，none表示無動畫效果

2）animation-duration，動畫時長

語法： animation-duration: time;

說明： 定義動畫完成一個週期所需要的時間，以秒或毫秒計，默認值"0"，參數必須指定，0表示無動畫效果

3）animation-timing-function，時間曲線（速度）函數

語法： animation-timing-function: value;

說明： 可選參數，默認值“ease”，其值可以是linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)，同transition-timing-function

4）animation-delay，動畫開始前等待的時間

語法： animation-delay: time;

說明： 可選參數，定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0

5）animation-iteration-count，動畫播放循環次數

語法： animation-iteration-count: n|infinite;

說明： n定義動畫播放次數的數值，infinte表示無限次播放，默認值爲1，只播放一次

6）animation-direction，動畫是否應該輪流反向播放

語法： animation-direction: normal|alternate;

說明： normal默認值，正常播放；alternate表示動畫應該輪流反向播放，會在奇數次數（1、3、5 等）正常播放，而在偶數次數（2、4、6 等）反向播放；需要注意的是animation-iteration-count爲1，animation-direction無效

animation-name: myfirst;
animation-duration: 4s;
animation-iteration-count: 5;
animation-direction: alternate

動畫@keyframs name爲myfirst；完成一個週期所需時間爲4妙；播放次數5次；第1,3,5次正向播放，第2,4次反向播放。

三、一個完整的DEMO

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3-過渡和動畫</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style> 
.table {margin-top: 60px}
.transition_box .box{position: relative; width: 100px; height: 80px; background: #e4f0f5; text-align: center; line-height: 80px;}
.transition_box .box:hover {background: #909; color: #fff; width: 150px}

@keyframes myfirst{
	0%   {background: #e4f0f5; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:120px;}
	75%  {background: green; left:0px; top:120px;}
	100% {background: red; left:0px; top:0px;}
}
.animation_box .box{position: relative; width: 300px; height: 200px;}
.animation_box .rect{background: #e4f0f5; position: absolute; width: 100px; height: 80px; left: 0; top: 0; text-align: center; line-height: 80px;}
</style>
</head>

<body>
	<div class="container">
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition:width 2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s .5s">Box2</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition:all 2s ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition:width 2s</td>
		<td>transition:width 2s .5s</td>
		<td>width 2s ease-in-out</td>
		<td>transition:all 2s ease-out</td>
	</tr>
</table>
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s; transition-delay:0.5s">Box2</div>
		</td>		
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s;transition-timing-function:ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition-duration:2s; transition-timing-function:ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition-property:width<br>transition-duration:2s</td>
		<td>transition-property:width<br>transition-duration:2s<br>transition-delay:0.5s</td>
		<td>transition-property:width; <br>transition-duration:2s<br>transition-timing-function:ease-in-out</td>
		<td>transition-duration:2s;<br>transition-timing-function:ease-out</td>
	</tr>
</table>
<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation: myfirst 4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s 5 alternate">Box2</div></div>
		</td>
	</tr>
	<tr>
		<td>animation: myfirst 4s</td>
		<td>animation: myfirst 4s infinte</td>
		<td>animation: myfirst 4s 5 alternate</td>
	</tr>
</table>

<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation-name: myfirst;animation-duration:4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:5;animation-direction:alternate">Box3</div></div>
		</td>
	</tr>
	<tr>
		<td>animation-name: myfirst;<br>animation-duration:4s</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite<br>animation-direction:alternate</td>
	</tr>
</table>
</body>
</html>

CSS3新特性詳解(四)：CSS3過度transition和動畫animation @keyframes規則詳解

一、transition 過渡

1、transition簡寫屬性

2、使用transition-property、transition-duration、transition-timing-function和transition-delay組合屬性

1）transition-property，應用過渡的 CSS 屬性的名稱

2）transition-duration，完成過渡效果需要花費的時間

3）transition-timing-function 過渡效果的時間曲線函數

4）transition-delay 動畫延遲，指定何時開始過渡效果

3、transition 過渡動畫生效的2個必要參數

二、animation 動畫

1、@keyframes 規則定義

2、animation 屬性詳解

2.1 animation 簡寫方式

2.2 animation-* 複合方式

三、一個完整的DEMO

lightdb hash index的性能和限制

CSS3新特性詳解(四)：CSS3過度transition和動畫animation @keyframes規則詳解

JavaScript JS利用location對象獲取頁面url、服務器地址、端口號、項目根路徑和查詢參數

BAT批處理腳本案例--利用MD5判斷文件是否發生變化

windows下tomcat8啓動腳本代碼剖析--startup.bat

shell腳本--第1個入門腳本Hello，World!

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結