css transition animation的使用（內(nèi)含貝賽爾曲線詳解）
我要評(píng)論區(qū)別：
transition也叫過(guò)渡動(dòng)畫(huà)，主要是用于讓一個(gè)元素從一種狀態(tài)過(guò)渡到另一種狀態(tài)效果，常用于主動(dòng)觸發(fā)的效果。例如移動(dòng)端的頁(yè)面切換（很常用）、button點(diǎn)擊效果（也很常見(jiàn)）。
animation才是css3正宗的動(dòng)畫(huà)，主要是用于實(shí)現(xiàn)某種持續(xù)的動(dòng)畫(huà)效果（當(dāng)然簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)也可以實(shí)現(xiàn)），常用于自動(dòng)觸發(fā)的效果。例如加載中的持續(xù)動(dòng)畫(huà)效果等等。
在學(xué)習(xí)這兩種動(dòng)畫(huà)之前要最好是先了解一下 transition-timing-function（過(guò)渡效果時(shí)間曲線）；
舉個(gè)栗子：
比如一輛小汽車(chē)從a點(diǎn)到b點(diǎn)的運(yùn)動(dòng)過(guò)程是一個(gè)動(dòng)畫(huà)，那么過(guò)渡效果時(shí)間曲線就是這輛小汽車(chē)到底是勻速過(guò)去呢還是一直加速?zèng)_過(guò)去，又或者說(shuō)一會(huì)加速?zèng)_一會(huì)減速慢行。
這個(gè)屬性有五種可供選擇的屬性值和一種可以自定義的屬性值
自定義屬性值：cubic-bezier(n,n,n,n)
在了解這個(gè)自定義屬性值之前我們?cè)賮?lái)深入了解一下貝塞爾曲線。
為什么要了解貝塞爾曲線？因?yàn)檫@個(gè)自定義時(shí)間過(guò)渡曲線就是用貝塞爾曲線表示的。（這是一個(gè)三階的貝塞爾曲線）
貝塞爾曲線應(yīng)用場(chǎng)景有哪些？貝塞爾曲線不僅僅在描述速度、時(shí)間上會(huì)起作用，在ps中的色彩調(diào)節(jié)和一些建筑工程學(xué)上面都會(huì)有涉及。
那我們先來(lái)畫(huà)一個(gè)二階的貝塞爾曲線吧。
首先打開(kāi)ps，在一個(gè)平面內(nèi)隨便畫(huà)三個(gè)點(diǎn)a、b、c然后連接起來(lái)，如下圖。
然后在a、b中找到一點(diǎn)d，在b、c中找到一點(diǎn)e，滿(mǎn)足公式：ad/ab = be/bc
然后呢，連接d、e，在de線上找到一點(diǎn)f，滿(mǎn)足公式：df/de = ad/ab = be/bc
然后就沒(méi)有然后了，因?yàn)檫@個(gè)二階貝塞爾曲線已經(jīng)畫(huà)完了，這個(gè)曲線就是所有可能的f點(diǎn)。
然后我用谷歌瀏覽器調(diào)試工具再演示一下二階貝塞爾曲線圖（本來(lái)是想用火狐演示的，但是火狐瀏覽器調(diào)試曲線的時(shí)候?qū)蛹?jí)有點(diǎn)高，還很敏感，無(wú)法用gif工具錄制，所以就放棄了，但實(shí)際上我更喜歡火狐的調(diào)試動(dòng)畫(huà)調(diào)試工具一點(diǎn)。）
1、上面的球代表動(dòng)畫(huà)執(zhí)行的過(guò)程，球越快，顏色越淺，反之越深。
2、兩個(gè)固定點(diǎn)的坐標(biāo)是（0，0）和（1，1）
3、可調(diào)試點(diǎn)的坐標(biāo)是隨意拉動(dòng)的，x軸要在0-1之間，y軸隨意。
4、x軸代表的時(shí)間，y軸代表的是路程（因?yàn)楹芏鄤?dòng)畫(huà)并不是簡(jiǎn)單的左右移動(dòng)，所以以后要理解成動(dòng)畫(huà)執(zhí)行的過(guò)程），注意：y軸不是速度，更不是加速度哦。
5、最下面的是cubic-bezier屬性具體取到的值（后面再講里面4個(gè)值得具體含義）
但實(shí)際開(kāi)發(fā)過(guò)程中我們用到的大部分都是三階貝塞爾曲線（當(dāng)然也有用多階貝塞爾曲線的），也就是用兩個(gè)點(diǎn)去控制曲線的弧度，具體原理和上面的類(lèi)似，如圖：
現(xiàn)在就可以解釋cubic-bezier為什么有四個(gè)值，就是這個(gè)兩個(gè)坐標(biāo)點(diǎn)。
再次聲明一下，y軸是距離，不是速度和加速度
cubic-bezier屬性還有五個(gè)可供選擇的值：（其實(shí)就是幾種寫(xiě)死的過(guò)渡效果曲線）
·linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
·ease 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
·ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
·ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
·ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
一、transition （過(guò)渡動(dòng)畫(huà)）
| 屬性 | 描述 | CSS |
|---|---|---|
|
transition |
簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。 | 3 |
|
transition-property |
規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。 | 3 |
|
transition-duration |
定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 | 3 |
|
transition-timing-function |
規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 | 3 |
|
transition-delay |
規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。 | 3 |
實(shí)例：
<!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>請(qǐng)把鼠標(biāo)指針?lè)诺近S色的 div 元素上，來(lái)查看過(guò)渡效果。</p>
<p><b>注釋?zhuān)?lt;/b>本例在 Internet Explorer 中無(wú)效。</p>
<p><b>注釋?zhuān)?lt;/b>這個(gè)過(guò)渡效果會(huì)在開(kāi)始之前等待兩秒。</p>
</body>
</html>
效果如下
transition簡(jiǎn)化屬性寫(xiě)法：
transition: property duration timing-function delay;
默認(rèn)值是transition：all 0 ease 0；
注意事項(xiàng)
在移動(dòng)開(kāi)發(fā)中直接使用transition動(dòng)畫(huà)會(huì)讓頁(yè)面變得非常卡頓（親測(cè)），所以我們常用transform:translate3D(0,0,0)或者transform:translateZ(0)來(lái)開(kāi)啟移動(dòng)端動(dòng)畫(huà)的gpu加速，使動(dòng)畫(huà)過(guò)程更流暢。
translate3D(0,0,0)是指電儀3D轉(zhuǎn)換
translateZ(0)是指定義3D轉(zhuǎn)換，只用Z軸
二、animation（動(dòng)畫(huà)效果）
因?yàn)閍nimation動(dòng)畫(huà)是一段持續(xù)且循環(huán)的動(dòng)畫(huà)效果，所以不像transition過(guò)渡動(dòng)畫(huà)那樣簡(jiǎn)潔，可能會(huì)涉及到很復(fù)雜的動(dòng)畫(huà)效果，所以我們要先學(xué)習(xí)一下@keyframes規(guī)則
該規(guī)則是用來(lái)創(chuàng)建動(dòng)畫(huà)的，說(shuō)直白點(diǎn)就是告訴元素按哪種動(dòng)畫(huà)效果執(zhí)行
@keyframes語(yǔ)法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定義動(dòng)畫(huà)的名稱(chēng)。 |
| keyframes-selector |
必需。動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。 合法的值：
|
| css-styles | 必需。一個(gè)或多個(gè)合法的 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>注釋?zhuān)?lt;/b>本例在 Internet Explorer 中無(wú)效。</p>
<div></div>
</body>
</html>
效果如下：
說(shuō)明
也就是說(shuō)keyframes允許你設(shè)置在不同的時(shí)間段執(zhí)行不同的動(dòng)畫(huà)效果
css3 動(dòng)畫(huà)屬性
| 屬性 | 描述 | CSS |
|---|---|---|
|
@keyframes |
規(guī)定動(dòng)畫(huà)。 | 3 |
|
animation |
所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性。 | 3 |
|
animation-name |
規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)。 | 3 |
|
animation-duration |
規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 | 3 |
|
animation-timing-function |
規(guī)定動(dòng)畫(huà)的速度曲線。默認(rèn)是 "ease"。 | 3 |
|
animation-delay |
規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。 | 3 |
|
animation-iteration-count |
規(guī)定動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。 | 3 |
|
animation-direction |
規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | 3 |
|
animation-play-state |
規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 | 3 |
|
animation-fill-mode |
規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)。 | 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>注釋?zhuān)?lt;/b>本例在 Internet Explorer 中無(wú)效。</p>
<div></div>
</body>
</html>
效果如下：
彩蛋
在火狐和谷歌中可以很方便的調(diào)處過(guò)渡效果時(shí)間曲線的定時(shí)函數(shù)編輯器，只用點(diǎn)擊下面的按鈕就可以了。
谷歌中：
火狐中：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css動(dòng)畫(huà)屬性使用及實(shí)例代碼(transition/transform/animation)
這篇文章主要介紹了css動(dòng)畫(huà)屬性使用及實(shí)例代碼(transition/transform/animation) ,需要的朋友可以參考下2019-05-09使用CSS transition和animation改變漸變狀態(tài)的實(shí)現(xiàn)方法
CSS漸變特性對(duì)于我們的幫助已經(jīng)非常強(qiáng)大了，它們可以幫助我們繪圖、 創(chuàng)建圖片占位符 、制作環(huán)形進(jìn)度條等等。接下來(lái)通過(guò)本文給大家介紹使用CSS transition和animation改變漸2018-10-29CSS3與動(dòng)畫(huà)有關(guān)的屬性transition、animation、transform對(duì)比（史上最全
這篇文章主要介紹了CSS3與動(dòng)畫(huà)有關(guān)的屬性transition、animation、transform對(duì)比，通過(guò)瀏覽器兼容性，用法和對(duì)比更深刻的展示了彼此之間的異同，具體操作步驟大家可查看下文2017-08-18CSS3中動(dòng)畫(huà)屬性transform、transition和animation屬性的區(qū)別
最近在項(xiàng)目中用到了CSS3中的動(dòng)畫(huà)屬性。無(wú)奈對(duì)于css3幾個(gè)新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點(diǎn)資料，總結(jié)一下，方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25CSS3中的Transition過(guò)度與Animation動(dòng)畫(huà)屬性使用要點(diǎn)
這篇文章主要介紹了CSS3中的Transition過(guò)度與Animation動(dòng)畫(huà)屬性使用要點(diǎn)Transition和Animation能被用來(lái)制作基本的頁(yè)面圖片動(dòng)態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的2016-05-20深入探究CSS中Animations和Transitions的工作原理
這篇文章主要介紹了深入探究CSS中Animations和Transitions的工作原理,包括和GPU的硬件使用及相關(guān)屬性等內(nèi)容,需要的朋友可以參考下2015-06-28CSS3的transition和animation的用法實(shí)例介紹
transition用于設(shè)定一個(gè)元素的兩個(gè)狀態(tài),不同的狀態(tài)可以用偽類(lèi)，下面與大家分享下CSS3的transition和animation的用法，需要的朋友可以參考下2014-08-20