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