資訊專欄INFORMATION COLUMN
摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。
“看清animation，transform， @keyframes，transition這四個的臉，以后這四個來了就是要做動畫了，看好你們的網頁，除了這四個，誰管你們都不好使。”
如果你有一個盒子，他的體內也有個小盒子。現在我們想把鼠標放上去他就能變大。
<style> .father { width: 200px; height: 200px; background-color: pink; } .son { width: 100px; height: 100px; background-color: skyblue; }style><body> <div class="father"> <div class="son">div> div>body>效果如下：
現在我們給他添加鼠標放上去子盒子變大效果
<style> .son:hover { width: 160px; height: 160px; }style>效果如下：
但是這樣是鼠標放上去立刻變大，一點也不美觀。如果要有個從小變大就好了，此時我們就可以請出第一位大佬————transition
.son { width: 100px; height: 100px; background-color: skyblue; transition: all 0.6s; }效果就變為：
這就是transition的作用,transition 屬性設置元素當過渡效果
transition 屬性設置元素當過渡效果，四個簡寫屬性為：
1.transition-property
2.transition-duration
3.transition-timing-function
4.transition-delay
其中他的復寫方式：
transition：transition-property transition-duration transition-timing-function transition-delay；
動畫基本使用
先定義動畫 用@Keyframes定義動畫（類似定義類選擇器） 再animation調用動畫@keyframes負責定義動畫
要創建 CSS3 動畫，你需要了解 @keyframes 規則。
@keyframes 規則是創建動畫。
@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。
1.0%是動畫的開始，100%是動畫的結束。這樣的規則就是動畫序列
2.在@Keyframes中規定某種css樣式。就能創建由當前樣式逐漸改為新樣式的動畫效果
3.動畫是使元素從一種樣式逐漸變化為另一個樣式的效果，可以改變任意多個樣式任意多的動畫效果
4.請用百分比來規定變化發生的時間，或者使用關鍵詞from和to，等于0%和100%
5.動畫序列可以做多個動畫的狀態的變化Keyframe關鍵幀,里面的百分比要是整數，是整體時間劃分
@keyframes move { /* 開始狀態 */ 0% { transform: translate(0px); } /* 結束狀態 */ 100% { transform: translate(500px, 0); } }當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規定動畫的名稱
規定動畫的時長
/* 動畫名稱 */ animation-name: move; /* 持續時間 */animation-duration: 10s; /* 播放次數 */ animation-iteration-count: infinite;1.animation
2.animation-timing-function
一.語法：
animation:動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態
二.注意：
1.簡寫屬性里面不包含animation-play-state屬性
2.暫停動畫：animation-play-state：puased;經常和鼠標經過等其他配合使用
3.想要動畫走回來而不是直接跳回來：animation-direction:alternate;
4.盒子動畫結束后，停在結束位置animation-fill-mode:forward
三.所以上面的簡例可以簡寫為：
animation: move 10s infinite; <div>div> @keyframes move { /* 開始狀態 */ 0% { transform: translate(0px); } /* 結束狀態 */ 100% { transform: translate(500px, 0); } } div { width: 300px; height: 300px; background-color: pink; /* 動畫名稱 */ animation-name: move; /* 持續時間 */ animation-duration: 10s; /* 播放次數 */ animation-iteration-count: infinite; }效果如下：
轉換（transform）是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、變形、縮放
縮放，顧名思義，可以放大和縮小。 只要給元素添加上了這個屬性就能控制它放大還是縮小。
1.語法：
transform:scale(x,y);
2.總結：
寬和高都放大一倍，相對于沒有放大
transform:scale(2,2) ：寬和高都放大了2倍
transform:scale(2) ：只寫一個參數，第二個參數則和第一個參數一樣，相當于 scale(2,2)
transform:scale(0.5,0.5)：縮小
2D移動是2D轉換里面的一種功能，可以改變元素在頁面中的位置，類似定位。
1.語法：
transform: translate(x,y);
2.總結：
定義 2D 轉換，沿著 X 和 Y 軸移動元素
translate中的百分比單位是相對于自身元素的 translate:(50%,50%);
translate類似定位，不會影響到其他元素的位置
對行內標簽沒有效果
2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。
1.語法：
transform:rotate(angle)
2.總結：
角度為正時，順時針，負時，為逆時針
默認旋轉的中心點是元素的中心點
1.語法:transform-origin:x y;
2.注意
注意后面的參數x和y是空格隔開
xy默認轉換的中心點是元素的中心點（50% 50%）
還可以給x y設置像素或者方位名稱（top bottom left right center）
1.語法：transform:translate() rotate() scale()…
2.注意：
其順序會影響轉換的效果，先旋轉會改變坐標軸方向
當我們同時有位移和其他屬性等等時候，記得要將位移放在最前面
一個元素可以添加多個動畫，逗號分割
三維坐標系其實就是指立體空間,立體空間是由3個軸共同組成的。
1.在2d平面產生近大遠小的視覺立體，但是只是效果二維的
2.如果想要在網頁產生3D效果需要透視（理解為3D物體投影在2D平面上）
3.透視我們也稱為視距，視距就是人的眼睛到視頻的距離
4.距離視覺點越近在電腦平面成像越大，越遠成像越小
5.透視的單位是像素
6.透視寫在被觀察元素的父盒子上面的
控制子元素是否開啟三維立體空間
代碼給父級，但是影響的是子盒子
屬性：
1.語法：
transform:translateX(…px)
transform:translateY(…px)
transform:translateZ(…px)
transform:translate3d(x,y,z)其中x,y,z分別指要移動的軸的方向的距離
復寫：transform：translateX（） translateY（） translateZ（）
可以讓元素在三維平面沿著x軸，y軸，z軸或者自定義軸進行旋轉
語法：
transform:rotateX(45deg)沿著x軸進行旋轉
transform:rotateY(45deg)沿著y軸進行旋轉
transform:rotateZ(45deg)沿著y軸進行旋轉
transform:rotate3d(x,y,z,45deg)沿著自定義軸旋轉deg角度
其中transform:rotateX(45deg)沿著x軸進行旋轉方向判斷參考左手手準則
transform:rotateY(45deg)沿著y軸進行旋轉判斷參考左手手準則
此時大拇指的方向改為指向下，即y軸正方向
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/123061.html
摘要：前瞻目前正在探究通過的多線程來提供更好的動畫效果，而不會觸發重布局及樣式重計算結論動畫給予了頁面豐富的視覺體驗。最好提前申明動畫，這樣能讓瀏覽器提前對動畫進行優化。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客 最近拜讀了一下html5rocks上幾位大神寫的一篇關于CSS3動畫性能優化的文章，學到了很多，在這里記錄...
摘要：前瞻目前正在探究通過的多線程來提供更好的動畫效果，而不會觸發重布局及樣式重計算結論動畫給予了頁面豐富的視覺體驗。最好提前申明動畫，這樣能讓瀏覽器提前對動畫進行優化。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客 最近拜讀了一下html5rocks上幾位大神寫的一篇關于CSS3動畫性能優化的文章，學到了很多，在這里記錄...
摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。 動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
閱讀 2100·2021-11-11 16:55
閱讀 3169·2021-10-11 10:58
閱讀 3037·2021-09-13 10:28
閱讀 3967·2021-07-26 23:57
閱讀 1005·2019-08-30 15:56
閱讀 1331·2019-08-29 13:15
閱讀 1258·2019-08-26 18:18
閱讀 1266·2019-08-26 13:44
