全面梳理 CSS3 動(dòng)畫

前言

主要內(nèi)容:CSS3 動(dòng)畫有那些屬性乃秀?動(dòng)畫怎么實(shí)現(xiàn),幾種方法圆兵?javaScript 與它優(yōu)缺點(diǎn)跺讯?

目錄

  1. 2D 屬性
  2. 3D 屬性
  3. transition 動(dòng)畫
  4. keyframes
  5. 優(yōu)缺點(diǎn)總結(jié)

1. 2D 屬性

我用了 transition 與 hover 詮釋這幾個(gè) 2D 屬性,windth殉农、height 其它很多導(dǎo)致外觀變化的屬性幾乎都可以變成動(dòng)畫刀脏。
簡(jiǎn)書不能鑲嵌 iframe,就看不見動(dòng)畫效果了超凳, 你可以到我的博客看這篇文章 :http://liangtongzhuo.com/atricle.html?5a46f1039f545400454bfc6e

<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/vjLbf9ys/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>

備注代碼

<div class="translate">transform: translate(5px,5px); 位移</div>
<div class="rotate">transform: rotate(30deg); 旋轉(zhuǎn)</div>
<div class="scale">transform: scale(2,4); 放大縮小</div>
<div class="skew">transform: skew(0deg,90deg);  Y 傾斜角 30 度愈污,不常用</div>
<div class="matrix">transform:matrix(0.866,0.5,-0.5,0.866,0,0);矩陣 不常用,但很厲害轮傍。</div>


div {
  background-color:     #87CEFA;
  margin-top:30px;
  transition: 2s;
}

.translate:hover{
  transform: translate(5px,5px);
 }
 
.rotate:hover{
transform: rotate(30deg); 
}

.scale:hover{
transform: scale(2,4); 
}

.skew:hover{
transform: skew(0deg,30deg);
}

.matrix:hover{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

還有一個(gè) transform-origin 屬性暂雹,示例程序 http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

2. 3D 屬性

3D 屬性幾個(gè)和上邊幾乎是相似的, 3D 還牽扯到透視問題以后再說(https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/r7p31dfx/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>

代碼備注

<div class="rotateX">transform: rotateX(60deg); x 軸 3D 旋轉(zhuǎn)</div>
<div class="rotateY">transform: rotateY(60deg); y 軸 3D 旋轉(zhuǎn)</div>
div {
  background-color:     #87CEFA;
  margin-top:30px;
  transition: 2s;
}

.rotateX:hover{
transform: rotateX(60deg);
  }
  
  .rotateY:hover{
transform: rotateY(60deg);
  }
  

3. transition 動(dòng)畫

<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/mph06yw2/3/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
代碼備注

<div class="rotateX"></div>
div {
  background-color:     #87CEFA;
  margin-top:30px;
  width:50px;
  height:50px;
  transition: 1s 0.5s width linear;
}

.rotateX:hover{
  width: 100px;
}

transition 動(dòng)畫時(shí)間1秒创夜,延遲0.5秒執(zhí)行 杭跪,只有 width 執(zhí)行動(dòng)畫, linear 勻速動(dòng)畫

(1)linear:勻速
(2)ease-in:加速
(3)ease-out:減速
(4)cubic-bezier函數(shù):自定義速度模式
 自定義速度 http://cubic-bezier.com/#.17,.67,.83,.67

4. keyframes

<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/vvdjnuvo/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>

animation-name  規(guī)定 @keyframes 動(dòng)畫的名稱挥下。    
animation-duration  規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒揍魂。默認(rèn)是 0桨醋。   
animation-timing-function   規(guī)定動(dòng)畫的速度曲線棚瘟。默認(rèn)是 "ease"。   
animation-delay 規(guī)定動(dòng)畫何時(shí)開始喜最。默認(rèn)是 0偎蘸。 
animation-iteration-count   規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1瞬内。   
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放迷雪。默認(rèn)是 "normal"。  
animation-play-state    規(guī)定動(dòng)畫是否正在運(yùn)行或暫停虫蝶。默認(rèn)是 "running"章咧。    

5. 優(yōu)缺點(diǎn)總結(jié)

優(yōu)點(diǎn):CSS3 能很方便的做出動(dòng)畫, 并不需要修改 DOM 和書寫 JavaScript 非常便捷能真。尤其是配合 hover赁严,來寫鼠標(biāo)移動(dòng)的特效扰柠。
缺點(diǎn):CSS3 對(duì)點(diǎn)擊事件獲取當(dāng)前動(dòng)畫執(zhí)行時(shí)間與效果是不清楚,不能根據(jù)當(dāng)前動(dòng)畫執(zhí)行狀態(tài)判斷邏輯疼约。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末卤档,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子程剥,更是在濱河造成了極大的恐慌劝枣,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件织鲸,死亡現(xiàn)場(chǎng)離奇詭異舔腾,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)昙沦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門琢唾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人盾饮,你說我怎么就攤上這事采桃。” “怎么了丘损?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵普办,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我徘钥,道長(zhǎng)衔蹲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任呈础,我火速辦了婚禮舆驶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘而钞。我一直安慰自己沙廉,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布臼节。 她就那樣靜靜地躺著撬陵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪网缝。 梳的紋絲不亂的頭發(fā)上巨税,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音粉臊,去河邊找鬼草添。 笑死,一個(gè)胖子當(dāng)著我的面吹牛扼仲,可吹牛的內(nèi)容都是我干的远寸。 我是一名探鬼主播促王,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼而晒!你這毒婦竟也來了蝇狼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤倡怎,失蹤者是張志新(化名)和其女友劉穎迅耘,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體监署,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颤专,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钠乏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片栖秕。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖晓避,靈堂內(nèi)的尸體忽然破棺而出簇捍,到底是詐尸還是另有隱情,我是刑警寧澤俏拱,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布暑塑,位于F島的核電站,受9級(jí)特大地震影響锅必,放射性物質(zhì)發(fā)生泄漏事格。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一搞隐、第九天 我趴在偏房一處隱蔽的房頂上張望驹愚。 院中可真熱鬧,春花似錦劣纲、人聲如沸逢捺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒸甜。三九已至棠耕,卻和暖如春余佛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背窍荧。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工辉巡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蕊退。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓郊楣,卻偏偏與公主長(zhǎng)得像憔恳,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子净蚤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color钥组,font,text-align今瀑,li...
    love2013閱讀 2,317評(píng)論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color程梦,font,text-align橘荠,li...
    wzhiq896閱讀 1,762評(píng)論 0 2
  • 看了很多視頻屿附、文章,最后卻通通忘記了哥童,別人的知識(shí)依舊是別人的挺份,自己卻什么都沒獲得。此系列文章旨在加深自己的印象贮懈,因...
    DCbryant閱讀 1,868評(píng)論 0 4
  • 1匀泊、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,640評(píng)論 0 7
  • HTML5 1.HTML5新元素 HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu): 標(biāo)簽描述 定義頁面獨(dú)立的內(nèi)容區(qū)域...
    L怪丫頭閱讀 2,811評(píng)論 0 4