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é)束語：一花一世界档礁，一木一浮生，愿與諸君共勉