css_transition_animation(內含貝賽爾曲線詳解)
區別:
transition也叫過渡動畫,主要是用於讓一個元素從一種狀態過渡到另一種狀態效果,常用於主動觸發的效果。例如移動端的頁面切換(很常用)、button點選效果(也很常見)。
animation才是css3正宗的動畫,主要是用於實現某種持續的動畫效果(當然簡單的過渡動畫也可以實現),常用於自動觸發的效果。例如載入中的持續動畫效果等等。
在學習這兩種動畫之前要最好是先了解一下 transition-timing-function(過渡效果時間曲線);
舉個栗子:
比如一輛小汽車從a點到b點的運動過程是一個動畫,那麼過渡效果時間曲線就是這輛小汽車到底是勻速過去呢還是一直加速衝過去,又或者說一會加速衝一會減速慢行。
這個屬性有五種可供選擇的屬性值和一種可以自定義的屬性值
自定義屬性值:cubic-bezier(n,n,n,n)
在瞭解這個自定義屬性值之前我們再來深入瞭解一下貝塞爾曲線。
為什麼要了解貝塞爾曲線?因為這個自定義時間過渡曲線就是用貝塞爾曲線表示的。(這是一個三階的貝塞爾曲線)
貝塞爾曲線應用場景有哪些?貝塞爾曲線不僅僅在描述速度、時間上會起作用,在ps中的色彩調節和一些建築工程學上面都會有涉及。
那我們先來畫一個二階的貝塞爾曲線吧。
首先開啟ps,在一個平面內隨便畫三個點a、b、c然後連線起來,如下圖。
然後在a、b中找到一點d,在b、c中找到一點e,滿足公式:ad/ab = be/bc
然後呢,連線d、e,在de線上找到一點f,滿足公式:df/de = ad/ab = be/bc
然後就沒有然後了,因為這個二階貝塞爾曲線已經畫完了,這個曲線就是所有可能的f點。
然後我用谷歌瀏覽器除錯工具再演示一下二階貝塞爾曲線圖(本來是想用火狐演示的,但是火狐瀏覽器除錯曲線的時候層級有點高,還很敏感,無法用gif工具錄製,所以就放棄了,但實際上我更喜歡火狐的除錯動畫除錯工具一點。)
1、上面的球代表動畫執行的過程,球越快,顏色越淺,反之越深。
2、兩個固定點的座標是(0,0)和(1,1)
3、可除錯點的座標是隨意拉動的,x軸要在0-1之間,y軸隨意。
4、x軸代表的時間,y軸代表的是路程(因為很多動畫並不是簡單的左右移動,所以以後要理解成動畫執行的過程),注意:y軸不是速度,更不是加速度哦。
5、最下面的是cubic-bezier屬性具體取到的值(後面再講裡面4個值得具體含義)
但實際開發過程中我們用到的大部分都是三階貝塞爾曲線(當然也有用多階貝塞爾曲線的),也就是用兩個點去控制曲線的弧度,具體原理和上面的類似,如圖:
現在就可以解釋cubic-bezier為什麼有四個值,就是這個兩個座標點。
再次宣告一下,y軸是距離,不是速度和加速度
cubic-bezier屬性還有五個可供選擇的值:(其實就是幾種寫死的過渡效果曲線)
·linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。
·ease 規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
·ease-in 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
·ease-out 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
·ease-in-out 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
一、transition (過渡動畫)
屬性 | 描述 | CSS |
---|---|---|
transition |
簡寫屬性,用於在一個屬性中設定四個過渡屬性。 | 3 |
transition-property |
規定應用過渡的 CSS 屬性的名稱。 | 3 |
transition-duration |
定義過渡效果花費的時間。預設是 0。 | 3 |
transition-timing-function |
規定過渡效果的時間曲線。預設是 "ease"。 | 3 |
transition-delay |
規定過渡效果何時開始。預設是 0。 | 3 |
例項:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:cubic-bezier(0,0,1,1);
transition-delay:0s;
}
div:hover{
width:500px;
}
</style>
</head>
<body>
<div></div>
<p>請把滑鼠指標放到黃色的 div 元素上,來檢視過渡效果。</p>
<p><b>註釋:</b>本例在 Internet Explorer 中無效。</p>
<p><b>註釋:</b>這個過渡效果會在開始之前等待兩秒。</p>
</body>
</html>
效果如下
transition簡化屬性寫法:
transition: property duration timing-function delay;
預設值是transition:all 0 ease 0;
注意事項
在移動開發中直接使用transition動畫會讓頁面變得非常卡頓(親測),所以我們常用transform:translate3D(0,0,0)或者transform:translateZ(0)來開啟移動端動畫的gpu加速,使動畫過程更流暢。
translate3D(0,0,0)是指電儀3D轉換
translateZ(0)是指定義3D轉換,只用Z軸
二、animation(動畫效果)
因為animation動畫是一段持續且迴圈的動畫效果,所以不像transition過渡動畫那樣簡潔,可能會涉及到很複雜的動畫效果,所以我們要先學習一下@keyframes規則
該規則是用來建立動畫的,說直白點就是告訴元素按哪種動畫效果執行
@keyframes語法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 描述 |
---|---|
animationname | 必需。定義動畫的名稱。 |
keyframes-selector |
必需。動畫時長的百分比。 合法的值:
|
css-styles | 必需。一個或多個合法的 CSS 樣式屬性。 |
案例
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /*Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-o-keyframes mymove /* Opera */{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>
<p><b>註釋:</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>
效果如下:
說明
也就是說keyframes允許你設定在不同的時間段執行不同的動畫效果
css3 動畫屬性
屬性 | 描述 | CSS |
---|---|---|
@keyframes |
規定動畫。 | 3 |
animation |
所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 | 3 |
animation-name |
規定 @keyframes 動畫的名稱。 | 3 |
animation-duration |
規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 | 3 |
animation-timing-function |
規定動畫的速度曲線。預設是 "ease"。 | 3 |
animation-delay |
規定動畫何時開始。預設是 0。 | 3 |
animation-iteration-count |
規定動畫被播放的次數。預設是 1。 | 3 |
animation-direction |
規定動畫是否在下一週期逆向地播放。預設是 "normal"。 | 3 |
animation-play-state |
規定動畫是否正在執行或暫停。預設是 "running"。 | 3 |
animation-fill-mode |
規定物件動畫時間之外的狀態。 | 3 |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
-moz-animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */
-o-animation:myfirst 5s linear 2s infinite alternate;/* Opera: */
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>註釋:</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>
效果如下:
彩蛋
在火狐和谷歌中可以很方便的調處過渡效果時間曲線的定時函式編輯器,只用點選下面的按鈕就可以了。
谷歌中:
火狐中:
相關推薦
css_transition_animation(內含貝賽爾曲線詳解)
區別: transition也叫過渡動畫,主要是用於讓一個元素從一種狀態過渡到另一種狀態效果,常用於主動觸發的效果。例如移動端的頁面切換(很常用)、button點選效果(也很常見)。 animation才是css3正宗的動畫,主要是用於實現某種持續的動畫效果(當然簡單的過渡動畫也可以實現),常用於自動觸發的
自定義控制元件三部曲之繪圖篇(六)——Path之貝賽爾曲線和手勢軌跡、水波紋效果
前言:好想義無反顧地追逐夢想從這篇開始,我將延續androidGraphics系列文章把圖片相關的知識給大家講完,這一篇先稍微進階一下,給大家把《android Graphics(二):路徑及文字》略去的quadTo(二階貝塞爾)函式,給大家補充一下。 本篇最終將以兩個例子給
cocos2d-x學習筆記(9)BezierTo和BezierBy貝賽爾曲線運動
Bezier貝塞爾曲線,任何一條曲線都可以通過與它相切的控制線兩端的點的位置來定義。因此,貝塞爾曲線可以用4個點描述,其中兩個點描述兩個端點,另外兩個點描述每一端的切線。 Sprite* sprite=Sprite::create("sprite.png"); spri
unity 實現物體沿指定的平滑曲線移動(通過貝塞爾曲線實現)
在實際專案開發中,為了實現某種動畫或者特效,策劃都會要求讓物體實現沿編輯的軌跡進行移動,今天這裡就講一下如何讓物體沿可編輯的路線進行移動,這裡主要是通過貝塞爾曲線實現。 首先要了解貝塞爾曲線的基礎知識及原理,具體可參考改連結: 這裡的思路就是首先就是把關鍵節點儲存起來
自定義View,貝賽爾曲線實現水波紋進度條
最終的效果: 思路就是在onDraw()中畫一些內容,主要方法有這些: /** * 剪裁圓形區域 */ clipCircle(canvas); /** * 畫圓邊線 */ drawCircle(canvas); /** * 畫波浪線 */ drawWave(
Swift-貝賽爾曲線實現畫圖板 && 截圖儲存到相簿中
本文內容參考自 傳送門。原文是用 OC 寫的,我把它改成了 Swift 的。 我們先來看看效果圖: 第一幅圖是我們畫了一個 “iOS” 的影象,第二幅圖是我們點選儲存成功,第三幅圖是可以在相簿中看到
Swift-貝賽爾曲線畫扇形、弧線、圓形、多邊形——UIBezierPath實現App下載時的動畫效果
上篇文章提到了使用貝賽爾曲線實現畫圖板(傳送門),頓時就對貝賽爾曲線興趣大增有木有。 之所以接觸貝賽爾曲線,多虧了師父。週五下班前師父給我留了個任務,讓我週末回家研究研究 iPhone 手機下載 Ap
Android自定義控制元件-Path之貝賽爾曲線和手勢軌跡、水波紋效果
從這篇開始,我將延續androidGraphics系列文章把圖片相關的知識給大家講完,這一篇先稍微進階一下,給大家把《android Graphics(二):路徑及文字》略去的quadTo(二階貝塞爾)函式,給大家補充一下。 本篇最終將以兩個例子給大家演示貝塞爾曲線
iOS開發-------塗鴉板(UIBezierPath 貝賽爾曲線)與 MVC初嘗試
塗鴉板,顧名思義就是能夠在上面畫點東西,貝賽爾曲線(UIBezierPath),也可以叫做貝賽爾路徑。因為path的直譯就是路徑,看起來很高大上,之前樓主也確實這麼認為的,很高大上,細細瞭解,其實也不難,畢竟難的東西蘋果都給我們封裝好了。初次用MVC模式來
NLP --- 隱馬爾可夫HMM(極大釋似然估計詳解)
上一節我們介紹了隱馬爾可夫的第三個基本問題的解決方案,但是遇到的問題是在如果語料庫沒有給出狀態轉移概率則就不能使用最大釋然估計了,因此使用EM演算法可以解決,在理解EM演算法之前需要理解最大釋然估計,本節就詳細的探討一下最大釋然估計,下面正式開始: 極大似然估計 這裡先舉一個簡單的例子:
POJ 3164 Command Network(最小樹形圖模板題+詳解)
noop clu html 建立 eof std const temp pri http://poj.org/problem?id=3164 題意: 求最小樹形圖。 思路: 套模板。 引用一下來自大神博客的講解:http://www.cnblogs.co
UI自動化測試(二)瀏覽器操作及對元素的定位方法(xpath定位和css定位詳解)
cli 刷新 ota api enter 版本 ror apache 窗口 Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera
2-V P N:ASA IPsec配置(ASA-IKEV1的L2L配置詳解)
部署 cmp 調用 是否 cati 進入 sco cisco ××× 一、實驗拓撲:二、實驗要求: 三、命令部署:一、接口地址、路由等基本部署:1、基本配置接口地址、環回口測試地址:R1(config)#int lo0 //創建環回口R1(con
超平面是什麼?——理解超平面(SVM開篇之超平面詳解)
研究了半天,終於對“超平面”有了個初步瞭解。 n 維空間中的超平面由下面的方程確定: &n
Liunx:環境基礎開發工具使用總結(基本操作命令及使用詳解)
目錄 1vim的基本概念 2vim的基本操作 3vim正常模式命令集 1:插入模式 2:移動游標 3:刪除文字 4:複製 5:替換 6:撤銷 7:更改 8:跳到指定行 4vim末行模式命令集 分屏操作 編譯器的使用 1:背景知識 2:g
機器學習中的超平面理解(SVM開篇之超平面詳解)
目錄 一、什麼是超平面 二、點到超平面的距離 三、 判斷超平面的正反 一、什麼是超平面 以上是三維為例子。 通過查閱資料對超平面有了一定的認識, n 維空間中的超平面由下面的方程確定: 其中,w&nb
Maven專案中整合SSH(pom.xml檔案的配置詳解)
Maven專案中整合SSH比較繁瑣,需要解決版本衝突問題,博主在下面給出了pom.xml檔案的配置資訊,改配置檔案整合的是:struts2-2.3.24、spring4.2.4、hibernate5.0.7。如果需要改版本,只需要更改<properties>標籤中
深度學習 --- 卷積神經網路CNN(LeNet-5網路學習演算法詳解)
上一節我們詳細探討了LeNet-5網路的架構,但是還沒有解釋該網路是如何進行學習的,如何更新權值的,本節將接著上一節進一步CNN的學習機制和權值更新過程,這裡請大家一定要對CNN網路有一個清晰的認識,知道每一層是做什麼的,為什麼這樣設定。原因在哪等。大家在學習的過程中需要多問自己幾個為什麼,這樣
html 盒子模型基礎(高度塌陷問題,BFC詳解)(六)
1.高度塌陷問題解決: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css
Xshell拖拽檔案到linux(rz和sz命令用法詳解)
在linux中rz 和 sz 命令允許開發板與主機通過串列埠進行傳遞檔案了,下面我們就來簡單的介紹一下rz 和 sz 命令的例子。 rz,sz是Linux/Unix同Windows進行ZModem檔案傳輸的命令列工具。 優點就是不用再開一個sftp工具登入上去上傳下