CSS transition animation的使用(內(nèi)含貝賽爾曲線詳解)
文章主要介紹了css transition animation的使用(內(nèi)含貝賽爾曲線詳解),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,區(qū)別:transition也叫過渡動畫...
文章主要介紹了css transition animation的使用(內(nèi)含貝賽爾曲線詳解),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,
區(qū)別:
transition也叫過渡動畫,主要是用于讓一個元素從一種狀態(tài)過渡到另一種狀態(tài)效果,常用于主動觸發(fā)的效果。例如移動端的頁面切換(很常用)、button點擊效果(也很常見)。
animation才是css3正宗的動畫,主要是用于實現(xiàn)某種持續(xù)的動畫效果(當(dāng)然簡單的過渡動畫也可以實現(xiàn)),常用于自動觸發(fā)的效果。例如加載中的持續(xù)動畫效果等等。
在學(xué)習(xí)這兩種動畫之前要最好是先了解一下 transition-timing-function(過渡效果時間曲線);
舉個栗子:
比如一輛小汽車從a點到b點的運動過程是一個動畫,那么過渡效果時間曲線就是這輛小汽車到底是勻速過去呢還是一直加速沖過去,又或者說一會加速沖一會減速慢行。
這個屬性有五種可供選擇的屬性值和一種可以自定義的屬性值
自定義屬性值:cubic-bezier(n,n,n,n)
在了解這個自定義屬性值之前我們再來深入了解一下貝塞爾曲線。
為什么要了解貝塞爾曲線?因為這個自定義時間過渡曲線就是用貝塞爾曲線表示的。(這是一個三階的貝塞爾曲線)
貝塞爾曲線應(yīng)用場景有哪些?貝塞爾曲線不僅僅在描述速度、時間上會起作用,在ps中的色彩調(diào)節(jié)和一些建筑工程學(xué)上面都會有涉及。
那我們先來畫一個二階的貝塞爾曲線吧。
首先打開ps,在一個平面內(nèi)隨便畫三個點a、b、c然后連接起來,如下圖。
然后在a、b中找到一點d,在b、c中找到一點e,滿足公式:ad/ab = be/bc
然后呢,連接d、e,在de線上找到一點f,滿足公式:df/de = ad/ab = be/bc
然后就沒有然后了,因為這個二階貝塞爾曲線已經(jīng)畫完了,這個曲線就是所有可能的f點。
然后我用谷歌瀏覽器調(diào)試工具再演示一下二階貝塞爾曲線圖(本來是想用火狐演示的,但是火狐瀏覽器調(diào)試曲線的時候?qū)蛹売悬c高,還很敏感,無法用gif工具錄制,所以就放棄了,但實際上我更喜歡火狐的調(diào)試動畫調(diào)試工具一點。)
1、上面的球代表動畫執(zhí)行的過程,球越快,顏色越淺,反之越深。
2、兩個固定點的坐標(biāo)是(0,0)和(1,1)
3、可調(diào)試點的坐標(biāo)是隨意拉動的,x軸要在0-1之間,y軸隨意。
4、x軸代表的時間,y軸代表的是路程(因為很多動畫并不是簡單的左右移動,所以以后要理解成動畫執(zhí)行的過程),注意:y軸不是速度,更不是加速度哦。
5、最下面的是cubic-bezier屬性具體取到的值(后面再講里面4個值得具體含義)
但實際開發(fā)過程中我們用到的大部分都是三階貝塞爾曲線(當(dāng)然也有用多階貝塞爾曲線的),也就是用兩個點去控制曲線的弧度,具體原理和上面的類似,如圖:
現(xiàn)在就可以解釋cubic-bezier為什么有四個值,就是這個兩個坐標(biāo)點。
再次聲明一下,y軸是距離,不是速度和加速度
cubic-bezier屬性還有五個可供選擇的值:(其實就是幾種寫死的過渡效果曲線)
·linear 規(guī)定以相同速度開始至結(jié)束的過渡效果(等于 cubic-bezier(0,0,1,1))。
·ease 規(guī)定慢速開始,然后變快,然后慢速結(jié)束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
·ease-in 規(guī)定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))。
·ease-out 規(guī)定以慢速結(jié)束的過渡效果(等于 cubic-bezier(0,0,0.58,1))。
·ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
- CSS自適應(yīng)布局實現(xiàn)子元素項目整體居中/內(nèi)部項目左對齊
- 使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色
- css新手教程之背景圖充滿整個屏幕的示例代碼介紹
- 詳解移動端網(wǎng)頁設(shè)計實現(xiàn)內(nèi)滾動的四種解決方案
- 網(wǎng)頁設(shè)計如何優(yōu)雅的實現(xiàn)垂直居中
- 網(wǎng)頁設(shè)計:淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)
- 用戶需求導(dǎo)致營銷型網(wǎng)頁設(shè)計
- 網(wǎng)頁設(shè)計柵格就是你對頁面版式的規(guī)劃
- 網(wǎng)頁設(shè)計內(nèi)容網(wǎng)頁中關(guān)于圖片預(yù)覽的設(shè)計
- 網(wǎng)頁設(shè)計:腳本素材重構(gòu)用戶體驗
CSS自適應(yīng)布局實現(xiàn)子元素項目整體居中/內(nèi)部項目左對齊示例代碼
文章主要介紹了CSS自適應(yīng)布局實現(xiàn)子元素項目整體居中,內(nèi)部項目左對齊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,日常工作時,我們可能遇到這...
使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色
文章主要介紹了使用CSS混合模式和SVG來動態(tài)更改產(chǎn)品圖片的顏色,需要的朋友可以參考下。前兩天在Codepen看到了@Kyle Wetton寫的一個示例, 使用CSS混合模式和SVG來改變沙發(fā)的...
css新手教程之背景圖充滿整個屏幕的示例代碼介紹
文章主要給大家介紹了關(guān)于css新手教程之背景圖充滿整個屏幕的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用css具有一定的參考學(xué)習(xí)價值。想讓整個界面有一個背...
詳解移動端網(wǎng)頁設(shè)計實現(xiàn)內(nèi)滾動的四種解決方案
這篇文章主要介紹了關(guān)于移動端實現(xiàn)內(nèi)滾動的四種解決方案,實現(xiàn)的效果就是在一個區(qū)域內(nèi)只允許部分區(qū)域產(chǎn)生滾動的效果,而其余部分則不能移動,需要的朋友可以參考借鑒,下面來一起看看吧。...
網(wǎng)頁設(shè)計如何優(yōu)雅的實現(xiàn)垂直居中
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的實現(xiàn)垂直居中的相關(guān)資料,文中分別給大家介紹了已知寬高的元素、未知寬高的元素以及基于 Flexbox 的解決方案,都分別給出了示例代碼供大家參考學(xué)習(xí),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧...
網(wǎng)頁設(shè)計:淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)
這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧...
用戶需求導(dǎo)致營銷型網(wǎng)頁設(shè)計
我們的每期話題,團(tuán)隊在內(nèi)部都會通過郵件進(jìn)行一番討論,隨著討論的激烈,往往能碰撞出很多有意義的觀點,因此,將討論內(nèi)容分享出來,有興趣的朋友可以接著話題討論下去。Junchen:期望不是從石頭里面蹦出來的,所有期望都是受到外界影響、結(jié)合自身需求的一個外在表現(xiàn)...
網(wǎng)頁設(shè)計柵格就是你對頁面版式的規(guī)劃
英文原文:http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm柵格就是你對頁面版式的規(guī)劃你日常所見的許多頁面都有柵格存在。你可能注意不到,但它確實存在,并且支撐著設(shè)計內(nèi)容,建立整體的架構(gòu),引導(dǎo)著頁面的元素。柵格是隱形的架構(gòu),用于指導(dǎo)你頁面...
網(wǎng)頁設(shè)計內(nèi)容網(wǎng)頁中關(guān)于圖片預(yù)覽的設(shè)計
之前有寫過《內(nèi)容頁頁碼的預(yù)覽導(dǎo)航》跟《照片預(yù)覽導(dǎo)航分析》兩個文章,想說明的是預(yù)覽這一功能在用戶心理所占有的比重是很大的,如果僅僅只是給出一排順序數(shù)字做為鏈接的標(biāo)題,用戶的心理會產(chǎn)生不安全感。雖然給出一排順序數(shù)字做為鏈接幾乎是整個互聯(lián)網(wǎng)的默認(rèn)分頁鏈接模...
網(wǎng)頁設(shè)計:腳本素材重構(gòu)用戶體驗
設(shè)計網(wǎng)站的同志背景主要有兩種:學(xué)計算機(jī)、學(xué)藝術(shù)?;旧蠒懘a的不懂設(shè)計,會設(shè)計的不懂代碼,這個格局似乎到今天還沒變。某些學(xué)計算機(jī)的同學(xué),有自己的審美品位,也能夠做出看起來不錯的網(wǎng)站,但學(xué)藝術(shù)的同學(xué)普遍難搞懂代碼...