資訊專欄INFORMATION COLUMN
摘要：屬性是定義元素距試圖的距離，設(shè)置以后，其子元素會獲得透視效果，需要注意的是該值只對轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個看成一個舞臺，后者是每一個都是一個舞臺。
作者：心葉
時間：2018-04-27 11:45
transform: none | transform-functions;【通過設(shè)置該屬性的值，我們可以對元素使用轉(zhuǎn)換，具體的屬性值在下面會專門介紹?！?/p>
transform-origin: x-axis y-axis z-axis;【設(shè)置元素轉(zhuǎn)換的中心點(diǎn)，最直觀的例子旋轉(zhuǎn)圖片，改變圖片選擇依賴的旋轉(zhuǎn)中心?！?/p>
transform-style: flat | preserve-3d;【定義里面轉(zhuǎn)換的元素是在2D平面呈現(xiàn)還是在3D空間呈現(xiàn)，講的直白些，就是這個元素里面的空間維度是二維還是三維?！?/p>
perspective: number | none;【屬性是定義3D元素距試圖的距離，設(shè)置以后，其子元素會獲得透視效果，需要注意的是該值只對3D轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過Transform的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個看成一個舞臺，后者是每一個都是一個舞臺。】
perspective-origin: x-axis y-axis;【必須和perspective一起使用，只對3D轉(zhuǎn)換元素有效，簡單的理解就是你的眼睛看的焦點(diǎn)?！?/p>
backface-visibility:hidden | visible;【這個很簡單，設(shè)置當(dāng)元素背對著屏幕時候，是否是可見的?！?/p>
上面介紹的屬性transform: none | transform-functions;其中有很多方法可以使用，具體的請查看文件API，這里沒有列舉出來的意義，其中perspective(n)方法是為3D轉(zhuǎn)換元素定義透視視圖，需要稍微留意一下，其中一些方法比較特殊，以后會多帶帶去介紹。
Transitions 過渡transition: property duration timing-function delay;
請始終設(shè)置 transition-duration 屬性，否則時長為 0，就不會產(chǎn)生過渡效果。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個屬性。
一些常用的屬性：1.transition-property：規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱；
2.transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒；
3.transition-timing-function：規(guī)定速度效果的速度曲線；
4.transition-delay：定義過渡效果何時開始。
Animation 動畫animation: name duration timing-function delay iteration-count direction;
請始終規(guī)定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個屬性。
一些常用的屬性：1.animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱；
2.animation-duration：規(guī)定完成動畫所花費(fèi)的時間，以秒或毫秒計；
3.animation-timing-function： 規(guī)定動畫的速度曲線；
4.animation-delay：規(guī)定在動畫開始之前的延遲；
5.animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)；
6.animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫；
7.animation-fill-mode (可以設(shè)置為none | forwards | backwards | both)：規(guī)定動畫在播放之前或之后，其動畫效果是否可見；
8.animation-play-state（可以設(shè)置為paused|running）：規(guī)定動畫正在運(yùn)行還是暫停，可以在 JavaScript 中使用該屬性，這樣就能在播放過程中暫停動畫；
9.@keyframes animName{from {} to {}}：定義動畫名稱為animName的動畫關(guān)鍵幀。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113170.html
摘要：規(guī)定應(yīng)用過渡的屬性的名稱。規(guī)定過渡效果的時間曲線?？赡艿闹凳侵林g的數(shù)值。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。 CSS3之transition實(shí)現(xiàn)下劃線 在這里先看看我們的demo showImg(https://segmentfault.com/img/remote/1460000014676200); 認(rèn)識transition 這是CSS3中新增的一個樣式，可以實(shí)現(xiàn)動畫的過度。通常...
摘要：先放個效果如果能訪問最好主要原理微信小程序現(xiàn)在實(shí)際上還是用的，里面搞動畫效率最高的莫過于使用的了。由于微信小程序中無法獲取到對應(yīng)元素的寬度，這個時間只能寫死或者根據(jù)的長度估算出一個值。 最近有個項(xiàng)目里面用到跑馬燈，網(wǎng)上搜了下，雖然有人貼出來過一些實(shí)現(xiàn)，但是實(shí)際上都存在一些個問題。 哎，再造個輪子吧。 先放個效果：showImg(https://segmentfault.com/img/...
摘要：動畫卡頓解決方案前端時間用實(shí)現(xiàn)頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案 前端時間用animation實(shí)現(xiàn)H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...
閱讀 2863·2023-04-25 20:06
閱讀 1484·2021-08-26 14:15
閱讀 2269·2021-08-12 13:27
閱讀 1807·2019-08-30 15:55
閱讀 3499·2019-08-30 13:20
閱讀 2855·2019-08-29 15:12
閱讀 3358·2019-08-29 15:06
閱讀 2888·2019-08-29 14:13
