1-2-11【CSS3】CSS過渡屬性

題外話:這節(jié)課非常有意思哦~可以讓元素動起來啦


文章內(nèi)容輸出來源:拉勾教育大前端就業(yè)集訓(xùn)營

1.概述

  • CSS3出現(xiàn)之前缠诅,前端一般使用Flash動畫或JavaScript制作動畫刺彩。
  • flash采用幀動畫的形式制作動畫,通過一幀一幀的畫面按照固定的順序和速度播放,比如說老式膠片電影玄帕。

老式膠卷電影的經(jīng)典開頭晨缴。

2.過渡屬性

  • 概述:在不使用Flash和js的情況下,使用過度屬性可自動實(shí)現(xiàn)動畫效果远搪。
    當(dāng)前元素只要有“屬性”發(fā)生變化時劣纲,即存在A和B兩種狀態(tài),使用過渡屬性谁鳍,即可實(shí)現(xiàn)A和B之間的平滑過渡動畫效果癞季。

  • 屬性寫法:transition:過渡的屬性 過渡時間 運(yùn)動曲線 延時時間;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: width 0.2s linear 0s;
        }
        .box:hover{
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

說明:transition設(shè)置的意思是:“當(dāng)該元素的width屬性發(fā)生變化時,使變化過渡0.2s實(shí)現(xiàn)倘潜,使用線性的變化方式绷柒,延遲0s開始過渡。
因?yàn)閠ransition屬性沒有監(jiān)視height屬性涮因,所以就算height變化了废睦,也是直接變化而沒有過渡動畫。

單一屬性

transition-property過渡的屬性
  • 屬性值
    • none:表示沒有屬性過渡养泡;
    • all:表示所有變化的屬性都過渡郊楣;
    • 屬性名:使用具體屬性名憔恳,多個屬性名用逗號隔開。

transition-duration和transition-delay

  • 概述:duration是過渡的時間長度净蚤,delay是在過渡前的延遲時間钥组。
  • 屬性值:以s為單位的時間長度,就算是0也要加單位s今瀑。

transition-timing-function時間曲線

  • 概述:動畫在播放時遵循的時間曲線程梦。
  • 屬性值
屬性值 描述
linear 規(guī)定以恒定的速度實(shí)現(xiàn)從開始到結(jié)束的效果
ease 規(guī)定慢速開始,然后變快橘荠,然后慢速結(jié)束的效果
ease-in 規(guī)定以慢速開始屿附,逐漸加速的效果
ease-out 規(guī)定以快速開始,逐漸減速的效果
ease-in-out 規(guī)定以慢速開始和結(jié)束的效果
cubic-bezier(x1,y1,x2,y2) 用兩個點(diǎn)的坐標(biāo)值哥童,計算出一條貝塞爾曲線挺份,作為動畫的時間曲線

說明:如圖所示,貝塞爾曲線是由兩個點(diǎn)計算得到的一條時間曲線贮懈,所以在cubic-bezier()中匀泊,只需要提供兩個點(diǎn),就可以指定一條你自定義的時間曲線朵你。

兼容性:IE10各聘、Firefox、Chrome以及Opera瀏覽器支持transition屬性抡医。Safari需要加前綴-webkit-躲因。

3.2D轉(zhuǎn)換

  • 概述:對元素進(jìn)行移動、縮放忌傻、旋轉(zhuǎn)大脉、拉長或拉伸。配合過渡和即將學(xué)習(xí)的動畫知識水孩,幾乎可以完全取代Flash箱靴。
  • 屬性名:transform
  • 屬性值:根據(jù)不同的屬性值,實(shí)現(xiàn)不同的2D轉(zhuǎn)換荷愕。

注意衡怀! transform是一個獨(dú)立的屬性,并不需要搭配transition才能生效安疗。我只是為了例子更加直觀所以才一起寫的抛杨,不要被誤導(dǎo)哦~

位移 translate()
  • 概述:對元素進(jìn)行水平&垂直方向上的移動。
  • 書寫語法
屬性值 說明
translate(x,y) x,y分別是水平和垂直方向的距離荐类,可以為px也可以為%
translate(x) 只有一個數(shù)值怖现,表示水平方向的位移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 位移屬性 */
           transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

說明:利用偽類選擇器hover,實(shí)現(xiàn)鼠標(biāo)移動至盒子上方時,盒子向右向下各位移100像素屈嗤。

縮放 scale()
  • 概述:在元素的寬高兩個維度對元素進(jìn)行縮放潘拨。
  • 書寫語法
屬性值 說明
scale(x,y) x,y分別是改變寬度和高度的倍數(shù)
scale(n) 只有一個數(shù)值,表示寬高同時縮放n倍
scaleX(n) 改變元素的寬度
scaleY(n) 改變元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 縮放 */
            transform: scale(0.5,1.5);
        }
    </style>
</head>
<body>
    <br>
    <br>
    <br>
    <div></div>
</body>
</html>

說明:如圖所示饶号,縮放盒子的寬度為50%铁追,縮放盒子的高度為150%。

旋轉(zhuǎn) rotate()
  • 概述:在元素的寬高兩個維度對元素進(jìn)行縮放茫船。
  • 書寫語法:transform: rotate(數(shù)字deg)
    • 說明:deg為度數(shù)單位琅束,正數(shù)為順時針旋轉(zhuǎn),負(fù)數(shù)為逆時針旋轉(zhuǎn)算谈。
    • 注意:元素旋轉(zhuǎn)后坐標(biāo)軸也會發(fā)生變化涩禀!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            position: relative;
            left: 50px;
            top: 50px;
            transition: all 0.5s linear 0s;
        }
        .box2{
            background-color: pink;
        }
        .box2:hover{
            transform: rotate(45deg) translate(100px);
        }
        .box1{
            background-color: red;
        }
        .box1:hover{
            transform: translate(100px) rotate(45deg) ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

說明:因?yàn)樾D(zhuǎn)后,元素的坐標(biāo)軸也會跟著旋轉(zhuǎn)然眼,所以旋轉(zhuǎn)后的位移會以新的坐標(biāo)軸為基準(zhǔn)進(jìn)行旋轉(zhuǎn)艾船,就導(dǎo)致了粉色盒子的情況。而同比紅色的盒子高每,是先位移后旋轉(zhuǎn)屿岂,位移時坐標(biāo)軸沒有受到影響,所以符合我們的預(yù)期觉义。

傾斜 skew()
  • 概述:在元素的水平方向和垂直方向上進(jìn)行2D傾斜。
  • 書寫語法:transform: skew(數(shù)字deg,數(shù)字deg);
  • 注意:兩個屬性值分別表示水平和垂直方向傾斜的角度浴井,屬性值可以為正可以為負(fù)晒骇,第二個數(shù)值不寫默認(rèn)為0。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s linear 0s;
            position: relative;
            top: 50px;
            left: 50px;
        }
        div:hover{
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

說明:此處以“在水平方向的傾斜”為例磺浙,注意洪囤,雖然傾斜了,但是坐標(biāo)軸并沒有發(fā)生變化撕氧。

transform-origin屬性
  • 概述:調(diào)整元素的水平和垂直方向基準(zhǔn)點(diǎn)的位置瘤缩。
  • 作用:主要用于旋轉(zhuǎn),旋轉(zhuǎn)是以元素的基準(zhǔn)點(diǎn)進(jìn)行變換的伦泥,基準(zhǔn)點(diǎn)的位置不同剥啤,旋轉(zhuǎn)的效果也不同。
  • 書寫方式:transform-origin: 水平方向 垂直方向;
  • 屬性值
    • 水平方向:可以使用關(guān)鍵字left不脯、center府怯、right以及像素值和百分比。
    • 垂直方向:可以使用關(guān)鍵字top防楷、center牺丙、bottom以及像素值和百分比。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            position: relative;
            transition: all 0.5s linear 0s;
            margin: 50px auto;
        }
        .box1{
            background-color: pink;
            transform-origin: center center;
        }
        .box1:hover{
            transform: rotate(45deg);
        }
        .box2{
            background-color: red;
            transform-origin: left top;
            margin: 0px auto;
        }
        .box2:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

說明:粉色盒子的基準(zhǔn)點(diǎn)是盒子的正中心,所以旋轉(zhuǎn)起來是以中心為基準(zhǔn)順時針旋轉(zhuǎn)45°冲簿;而紅色盒子的基準(zhǔn)點(diǎn)是左上頂點(diǎn)粟判,所以旋轉(zhuǎn)起來是以左上頂點(diǎn)為中心順時針旋轉(zhuǎn)45°,兩者效果因基準(zhǔn)點(diǎn)位置不同而大相徑庭峦剔。

前端文章匯總目錄

http://www.reibang.com/p/6d80dd616ff4


結(jié)束語:一花一世界档礁,一木一浮生,愿與諸君共勉

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羊异,一起剝皮案震驚了整個濱河市事秀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌野舶,老刑警劉巖易迹,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異平道,居然都是意外死亡睹欲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門一屋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窘疮,“玉大人,你說我怎么就攤上這事冀墨≌⑸溃” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵诽嘉,是天一觀的道長蔚出。 經(jīng)常有香客問我,道長虫腋,這世上最難降的妖魔是什么骄酗? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮悦冀,結(jié)果婚禮上趋翻,老公的妹妹穿的比我還像新娘。我一直安慰自己盒蟆,他們只是感情好踏烙,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著历等,像睡著了一般宙帝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上募闲,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天步脓,我揣著相機(jī)與錄音,去河邊找鬼。 笑死靴患,一個胖子當(dāng)著我的面吹牛仍侥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸳君,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼农渊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了或颊?” 一聲冷哼從身側(cè)響起砸紊,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎囱挑,沒想到半個月后醉顽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡平挑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年游添,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片通熄。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡唆涝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出唇辨,到底是詐尸還是另有隱情廊酣,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布赏枚,位于F島的核電站亡驰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏嗡贺。R本人自食惡果不足惜隐解,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一鞍帝、第九天 我趴在偏房一處隱蔽的房頂上張望诫睬。 院中可真熱鬧,春花似錦帕涌、人聲如沸摄凡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亲澡。三九已至,卻和暖如春纫版,著一層夾襖步出監(jiān)牢的瞬間床绪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留癞己,地道東北人膀斋。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像痹雅,于是被迫代替她去往敵國和親仰担。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361