日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3动画模块transform transition animation属性解释

發(fā)布時(shí)間:2025/4/16 编程问答 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 css3动画模块transform transition animation属性解释 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

首先來看下對(duì)各大瀏覽器的兼容性

?IEFirefoxSafariChromeOpera
CSS 2D Transformno3.53.22.010.5
CSS 3D Transformnono4.* (Mac)nono
Transitionno3.73.22.010.5
Animationnono4.02.0no

transform

這個(gè)比較簡單,控制元素進(jìn)行平面上的二維變換,有三個(gè)屬性:

1. 旋轉(zhuǎn) rotate()。對(duì)元素按順時(shí)針或逆時(shí)針方向進(jìn)行旋轉(zhuǎn),其值為正數(shù)時(shí),表示按順時(shí)針方向旋轉(zhuǎn),其值為負(fù)數(shù)時(shí),表示按逆時(shí)針方向旋轉(zhuǎn)。單位為度數(shù)(deg)。例如:

? ?ps:旋轉(zhuǎn)屬性可以實(shí)現(xiàn)那種常見的三角的tips效果。把一個(gè)正方形旋轉(zhuǎn)45度就變成◆了,自己試試吧

2. 偏斜?skew(x,y)。有兩個(gè)參數(shù),第一個(gè)表示按x軸方向傾斜的度數(shù),第二個(gè)是y軸的度數(shù)。主要的區(qū)別是,x軸的值若為正數(shù),表示逆時(shí)針偏斜,若為負(fù)數(shù),表示順時(shí)針偏斜;而y軸的值跟x軸的剛好相反,正為順,負(fù)為逆。

3. 平移?translate(x,y)。平移是一種利用x和y坐標(biāo)值(單位為px)定位元素的方式,注意這個(gè)跟position的定位不一樣,它參照的位置是它本身,但position參照的是父級(jí)。

transform:rotate(45deg); /*順時(shí)針旋轉(zhuǎn)45度*/ transform:rotate(-45deg); /*逆時(shí)針旋轉(zhuǎn)45度*/transform:skew(30deg,10deg); /*在x軸方向逆時(shí)針偏斜30度,在y軸方向順時(shí)針偏斜10度*/transform:translate(10px,15px); /*向左移動(dòng)10px,向下移動(dòng)15px*//*多個(gè)transform類型的設(shè)置可以寫一起的,之間用空格分隔,例如上面的可以這樣寫:*/ transform:rotate(45deg) skew(30deg,10deg) translate(10px,15px)

?transition

官方的解釋是“允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或者對(duì)元素的任何改變中觸發(fā),并以圓滑的動(dòng)畫效果改變CSS的屬性值”。比如原來的背景是#fff,hover時(shí)是#000,如果用了transition,就是從#fff平滑過渡成#000(發(fā)揮自己的想象力想一下吧)。

transition可以分解成4個(gè)屬性:

1. transtion-property 用于指定哪些屬性值改變時(shí)顯示transition動(dòng)畫效果。none表示沒有,all表示所有,或者用逗號(hào)分隔需要指定的屬性,如transition-property: background,width,height.

2. transition-duration 表示動(dòng)畫持續(xù)時(shí)間,可以設(shè)置多個(gè)值,中間用逗號(hào)分隔,其中每個(gè)值對(duì)應(yīng)transition-perproty設(shè)置的每個(gè)屬性。例如:

?

transition-perproty: width,height; transition-duration:1s,0.5s /*表示寬度的轉(zhuǎn)換動(dòng)畫持續(xù)的時(shí)間為1s,高度轉(zhuǎn)換動(dòng)畫持續(xù)的時(shí)間為0.5s*/

?

3. transition-timing-function 表示轉(zhuǎn)換動(dòng)畫的效果,有多個(gè)值可以選擇:

  1)Linear 指定一個(gè)線性漸變

  2)ease 指定一個(gè)逐漸慢下來的動(dòng)畫

  3)ease-in 指定一個(gè)先慢后快的漸變動(dòng)畫

  4)ease-out 指定一個(gè)先快后慢的漸變動(dòng)畫

  5)ease-in-out 指定一個(gè)先慢后快再慢的漸變動(dòng)畫

  6)cubic-bezier 使用貝塞爾曲線來指定一個(gè)復(fù)雜的動(dòng)畫漸變效果(這個(gè)效果很不錯(cuò),可以做比較復(fù)雜的效果,附帶一個(gè)制作效果的網(wǎng)站:http://matthewlein.com/ceaser/)

4. transtion-delay 指定在動(dòng)畫開始前等待的時(shí)間,不需要時(shí)可以省略。

animation

animation比transition更接近動(dòng)畫的含義,可以為animation設(shè)置多幀的效果,然后把這些幀組合、變換,按動(dòng)畫效果顯示出來。共有6個(gè)屬性,在了解它的屬性之前,首先有必要先熟悉一下關(guān)鍵幀keyframes這個(gè)屬性。

keyframes 從字面上看,keyframes表示關(guān)鍵幀的意思。在flash里面也存在這個(gè)概念,我們可以想想一張gif動(dòng)畫由一幀一幀的圖像組成。在CSS3里,我們用keyframes描述第一幀的效果,用animation描述每一幀如何組合在一起以及表現(xiàn)的效果。格式如下:

?

@keyframes 動(dòng)畫標(biāo)識(shí)名{ /*動(dòng)畫標(biāo)識(shí)名將被animation-name屬性所引用*//*每一幀的動(dòng)畫效果,可以通過百分比數(shù)值加樣式的形式來定義*/0%{background-color: white;}50%{background-color: red;} 100%{background-color: black; } }
/*我們可以把百分比數(shù)值看做第一幀在動(dòng)畫中時(shí)間軸的位置,0%在時(shí)間軸的開始,50%在時(shí)間軸的正中,100%在時(shí)間軸的終點(diǎn)。那以上的動(dòng)畫效果就是,元素的背景顏色會(huì)從白色漸變成紅色,再從紅色漸變成黑色。0%和100%也可以分別用form和to來代替*/
@keyframes 動(dòng)畫標(biāo)識(shí)名{from{background-color: white;}50%{background-color: red;} to{background-color: black; } }

?屬性:

1. animation-name 此屬性指定動(dòng)畫應(yīng)對(duì)的keyframes,比如設(shè)置animation-name為loading,那么動(dòng)畫就對(duì)應(yīng)@keyframes loading所聲明的關(guān)鍵幀。如果沒有定義關(guān)鍵幀,動(dòng)畫將不會(huì)生效。

2. animation-duration 定義一次動(dòng)畫的持續(xù)時(shí)間,默認(rèn)值為0

3. animation-delay 定義從觸發(fā)到開始動(dòng)畫的時(shí)間

4.?animation-timing-function 定義動(dòng)畫顯示的效果,例如先快后慢,先慢后快等,屬性值與transition-timing-function相同

5.?animation-iteration-count 該屬性定義動(dòng)畫循環(huán)的次數(shù),默認(rèn)為1。我們可以用infinite來使動(dòng)畫無限次循環(huán),這是transition動(dòng)畫所無法支持的。

6. animation-direction 定義動(dòng)畫播放的方向,默認(rèn)值為normal,代表每次動(dòng)畫都向前播放。另外一個(gè)值是alternate,第偶數(shù)次動(dòng)畫向前播放,第奇數(shù)次逆向播放。

?

要注意在寫以上的屬性時(shí),都要根據(jù)不同的瀏覽器加上前綴,-webkit-,-o-,-ms-,-moz-

附帶相關(guān)鏈接:

http://www.w3cplus.com/content/css3-transform(transform)

http://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html(transition)

http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html(animation)

總結(jié)

以上是生活随笔為你收集整理的css3动画模块transform transition animation属性解释的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。