CSS3轉換過渡動畫效果總結
內容摘要：
本篇主要介紹CSS3的一些動畫效果設定，從轉換、過渡、動畫3個方式總結介紹。
目錄簡介：
1. 轉換
2. 過渡
3. 動畫
標籤：
CSS3，transform，transition，keyframes，animation
1． 轉換
轉換即transform，是指html元素在原來屬性基礎上增加轉換效果之後形成的新的屬性所表現的狀態。通常為通過CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
分為2D和3D兩種轉換模式效果。
2D轉換：
2D轉換有是通過給元素指定transform屬性來實現，有translate()、rotate()、scale()、skew()、matrix()5種取值設定方式。
translate()方法：
定義：通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數。
例項：值translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素
div
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
-moz-transform:translate(50px,100px); /* Firefox */
}
rotate() 方法：
定義：通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
例項：值 rotate(30deg) 把元素順時針旋轉 30 度。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
scale()方法：
定義：通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數。
例項：值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
skew ()方法：
定義：通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數。
例項：值 skew(30deg,20deg)圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
matrix()方法：
定義：matrix() 方法把所有 2D 轉換方法組合在一起。
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
例項：如何使用 matrix 方法將 div 元素旋轉 30 度：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
2D轉換進階：
除了可以給元素指定transform外還可以指定，transform-origin設定旋轉元素的基點位置：
Transform-origin屬性：
定義：transform-origin:x-axis y-axis z-axis;
|
x-axis |
定義檢視被置於 X 軸的何處。可能的值： · left · center · right · length · % |
|
y-axis |
定義檢視被置於 Y 軸的何處。可能的值： · top · center · bottom · length · % |
|
z-axis |
定義檢視被置於 Z 軸的何處。可能的值： · length |
例項：設定旋轉元素的基點位置
div{
transform: rotate(45deg);
transform-origin:20% 40%;
}
補充：2D轉換除了以上5中主類方法外，還可以單獨針對X方向或Y方向進行轉換操作，進行更精細的操作。方法如下：
|
函式 |
描述 |
|
matrix(n,n,n,n,n,n) |
定義 2D 轉換，使用六個值的矩陣。 |
|
translate(x,y) |
定義 2D 轉換，沿著 X 和 Y 軸移動元素。 |
|
translateX(n) |
定義 2D 轉換，沿著 X 軸移動元素。 |
|
translateY(n) |
定義 2D 轉換，沿著 Y 軸移動元素。 |
|
scale(x,y) |
定義 2D 縮放轉換，改變元素的寬度和高度。 |
|
scaleX(n) |
定義 2D 縮放轉換，改變元素的寬度。 |
|
scaleY(n) |
定義 2D 縮放轉換，改變元素的高度。 |
|
rotate(angle) |
定義 2D 旋轉，在引數中規定角度。 |
|
skew(x-angle,y-angle) |
定義 2D 傾斜轉換，沿著 X 和 Y 軸。 |
|
skewX(angle) |
定義 2D 傾斜轉換，沿著 X 軸。 |
|
skewY(angle) |
定義 2D 傾斜轉換，沿著 Y 軸。 |
3D轉換：
3D轉換的設定方法和2D是一致，通過給元素設定transform和transform-origin屬性。除此之外還增加了transform-style，perspective，perspective-origin，backface-visibility
屬性設定值增加如下的方法：
|
函式 |
描述 |
|
matrix3d(n,n,n,n,n,n, |
定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
|
translate3d(x,y,z) |
定義 3D 轉化。 |
|
translateX(x) |
定義 3D 轉化，僅使用用於 X 軸的值。 |
|
translateY(y) |
定義 3D 轉化，僅使用用於 Y 軸的值。 |
|
translateZ(z) |
定義 3D 轉化，僅使用用於 Z 軸的值。 |
|
scale3d(x,y,z) |
定義 3D 縮放轉換。 |
|
scaleX(x) |
定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
|
scaleY(y) |
定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
|
scaleZ(z) |
定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
|
rotate3d(x,y,z,angle) |
定義 3D 旋轉。 |
|
rotateX(angle) |
定義沿 X 軸的 3D 旋轉。 |
|
rotateY(angle) |
定義沿 Y 軸的 3D 旋轉。 |
|
rotateZ(angle) |
定義沿 Z 軸的 3D 旋轉。 |
|
perspective(n) |
定義 3D 轉換元素的透視檢視。 |
2． 過渡
過渡即transition。通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果。一般的效果是將元素的原始狀態到最終狀態的屬性形成一個逐漸改變的過渡效果，視覺上是一個漸變過程，就如同一個動畫效果。
要實現這一點，必須規定兩項內容：
1.規定您希望把效果新增到哪個 CSS 屬性上。CSS屬性可以是常用的如height,width,color等，此外還可以新增到transform等轉換的屬性。並且同時要配合指定什麼條件下觸發到指定的最終狀態的屬性值，這樣就可以在條件滿足的情況下，屬性值逐漸改變的動畫呈現。下面的例項都是以滑鼠懸停在元素上觸發。
2.規定效果的時長。如果時長未規定或設定為0，則不會有過渡效果。預設值是 0。
例項1：當滑鼠指標懸浮於 <div> 元素上時的寬度從原來的值逐漸變成300px。
div:hover
{
width:300px;
}
例項2：當滑鼠懸停是，同時改變多個屬性width、height和transform
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
div:hover
{
width:300px;
height:600px;
transform:scaleX(360deg);
}
注：例項2需要如上介紹所說的要指定在什麼條件下的最終狀態。這裡設定在滑鼠懸停時要顯示的最終效果屬性。
過渡屬性：
過渡屬性的兩個例項寫法
寫法1：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
寫法2：簡寫transition屬性
div
{
transition: width 1s linear 2s;/* Firefox 4 */
}
3． 動畫
動畫即ainimation。是真正意義上的類計算機視訊動畫，由起始過程中的幀來定義。@keyframes規則用於建立動畫，@keyframes就是定義過程中的特定時間點的幀。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
注: InternetExplorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。Chrome 和 Safari 需要字首-webkit-。Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。
@keyframes寫法：
寫法1：指定起止點的css屬性值，通過from和to來指定第一幀和最後一幀。
@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;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
寫法2：按照百分比指定，過程點的幀
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
0%=from;100%=to，但不能混用。0% 是動畫的開始，100% 是動畫的完成。@keyframes的定義可以同時指定多個屬性的值,包括transform。
指定動畫：
通過規定至少以下兩項 CSS3 動畫屬性值設定到animation屬性上，即可將動畫繫結到選擇器物件上：
1.規定動畫的名稱
2.規定動畫的時長
例項：把如上@keyframes指定到div上
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
動畫屬性值：
動畫屬性的寫法：
寫法1：每個屬性單獨指定
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
寫法2：簡寫方式
div
{
animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
補充內容：
參考資料：