?css常見的動畫效果：平移，縮放，旋轉
css實現(xiàn)動畫主要有三種方式：文章來源：http://www.zghlxwxcb.cn/news/detail-488096.html
- transition實現(xiàn)漸變動畫
- transform實現(xiàn)縮放平移效果動畫
- animation實現(xiàn)自定義動畫?
?transition實現(xiàn)漸變動畫
1. 語法:
1. transition: 屬性是個復合屬性 。
2. transition: property duration timing-function delay
3. 默認值為: transition: all 0 ease 0;
2. 屬性介紹:
1. transition-property: 規(guī)定設置過渡效果的 css 屬性名稱 。
2. transition-duration: 規(guī)定完成過渡效果需要多少秒或毫秒 。
3. transition-timing-function: 指定過渡函數(shù), 規(guī)定速度效果的速度曲線 。
4. transition-delay: 指定開始出現(xiàn)的延遲時間 。
3. 子屬性詳解:
1. transition-property: none |all |property;
1. 值為 none 時, 沒有屬性會獲得過渡效果
2. 值為 all 時, 所有屬性都將獲得過渡效果
3. 值為指定的 css 屬性應用過渡效果, 多個屬性用逗號隔開
4. css 屬性實際使用時的設置:
1. color: background-color, border-color, color, outline-color ;
2. length: 真實的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
3. integer: 離散步驟（整個數(shù)字）, 在真實的數(shù)字空間, 以及使用 floor() 轉換為整數(shù)時發(fā)生 如: outline-offset,z-index 。
4. number: 真實的（浮點型）數(shù)值, 如:zoom, opacity, font-weight 。
5. rectangle: 通過 x, y, width 和 height（轉為數(shù)值）變換，如: crop 。
6. visibility: 離散步驟, 在0到1數(shù)字范圍之內(nèi), 0表示“隱藏”, 1表示完全"顯示"; 如: visibility 。
7. shadow: 作用于 color, x, y 和 blur（模糊）屬性; 如：text-shadow 。
8. background-image: 通過每次停止時的位置和顏色進行變化 。 它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動畫 。
2. transition-duration
1. transition-duration: time;
2. 該屬性主要用來設置一個屬性過渡到另一個屬性所需的時間, 也就是從舊屬性過渡到新屬性花費的時間長度, 俗稱持續(xù)時間
3. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
1. 該屬性指的是過渡的 “緩動函數(shù)” 。 主要用來指定瀏覽器的過渡速度, 以及過渡期間的操作進展情況 。
2. 注意: 值 cubic-bezier(n,n,n,n) 可以定義自己的值, 如 cubic-bezier(0.42,0,0.58,1) 。
3. 各個子屬性詳細解析:
1. linear: 勻速 (約等于)== cubic-bezier(0,0,1,1) 。
2. ease: 慢快慢 (約等于)== cubic-bezier(0.25,0.1,0.25,0.1) 。
3. ease-in: 慢速開始的過渡 (約等于)== cubic-bezier(0.45,0.,1,1) 。
4. ease-out: 慢速結束的過渡 (約等于)== cubic-bezier(0,0.,0.58,1) 。
5. ease-in-out: 慢速開始和結束的過渡 (約等于)== cubic-bezier(0.45,0.,0.58,1) 。
6. cubic-bezier(n,n,n,n): 在 cubic-bezier 函數(shù)中定義自己的值; 可能的值是0~1之間的數(shù)值 。
4. transition-delay
1. 這個屬性沒什么說的了, 就是過渡效果開始前的延遲時間, 單位秒或者毫秒transform實現(xiàn)縮放平移效果動畫?
translate：位移
scale：縮放
rotate：旋轉
skew：傾斜
一般配合transition過度使用。transform不支持inline元素，使用之前把它變?yōu)閎lock。
移動(translate)：主要用于將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)?
縮放(scale)：一般用于元素的大小收縮設定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。?
旋轉(rotate)：主要分為2D旋轉和3D旋轉。rotate(angle)，2D 旋轉，參數(shù)為角度，如45deg；rotate(x,y,z,angle)，3D旋轉，圍繞原地到(x,y,z)的直線進行3D旋轉rotateX(angle)，沿著X軸進行3D旋轉；rotateY(angle)；rotateZ(angle)；
傾斜(skew)：主要用于對元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉換；skewX(angle)，沿著x軸的2D傾斜轉換；skew(angle)，沿著y軸的2D傾斜轉換。animation實現(xiàn)自定義動畫?
animation: ???name? duration timing-function delay iteration-count direction;
animation :? 動畫名稱 動畫時長? 速度曲線? 延遲時間 重復次數(shù) 動畫方向 執(zhí)行完畢時狀態(tài);
動畫名稱和時長必須賦值，取值不分先后順序
如果有兩個時間值，第一個時間表示動畫時長，第二個時間表示延遲時間| 屬性 | 描述 | 屬性值 |
|---|---|---|
| animation-name | 動畫名稱 | |
| animation-duration | 規(guī)定完成動畫所花費的時間，以秒或毫秒計 | normal、reverse、alternate、alternate-reverse |
| animation-iming-function | 規(guī)定動畫的速度曲線。 | linear、ease、ease-in、ease-out、ease-in-out |
| animation-delay | 規(guī)定在動畫開始之前的延遲 | |
| animation-iteration-count | 規(guī)定動畫應該播放的次數(shù)。 | |
| animation-direction | 規(guī)定是否應該輪流反向播放動畫 | |
| animation-fill-mode | 指定動畫的填充模式，默認為none | forwards、backwards、both |
| animation-play-state | 指定動畫播放狀態(tài)，正在運行或暫停。默認是 running | running、pauser |
animation屬性使用實例：文章來源地址http://www.zghlxwxcb.cn/news/detail-488096.html
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation 屬性。</p>
<div></div>
</body>
</html>到了這里，關于css有哪些動畫效果怎么實現(xiàn)的的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
