transition：transition-propertype transition-duration transiton-timing-function transition-delay
過渡的復合屬性
其中，過渡的持續時間不可以省略
參與過渡的屬性省略：預設是all
過渡的速度變換曲線省略：預設是ease
過渡的延時時間省略：預設是0
可單獨設定:
（1）transition-propertype: 需過渡的屬性名
單獨設定時可以寫多個屬性名，中間用逗號隔開
可選值：
①屬性名（width，height…）
②all :選中所有需變化的屬性名
③none:沒有屬性需要過渡
（2）transition-duration: 過渡所持續的時間
多個屬性值之間，用逗號隔開，是和參與過渡的屬性一一對應的關係
單位：s ms
500ms = 0.5s = .5s
（3）transiton-timing-function: 速度曲線
可選值：
① ease :預設值 慢速開始，之後變快，最後以慢速結束
② ease-in :慢速開始，快速結束
③ ease-out :快速開始，慢速結束
④ease-in-out :慢速開始，之後變快，最後以慢速結束
⑤linear :勻速
⑥貝塞爾曲線：cubic-bezier(.01,1.05,.95,.29)
（貝塞爾曲線官網：
（4） transition-delay: 過渡延遲執行的時間
transform:變形函式
1、2d變形函式：
（1） translate(x,y)：位移
translate(num):
乙個值元素在水平移動num的距離
如果是兩個值，第乙個值代表在水平方向上的位移，第二個值代表垂直方向上的位移
translatex(num)：元素在水平方向移動num的距離
translatey(num)：元素在垂直方向移動num的距離
num如果為正值，代表水平右移動，垂直向下移動
num如果為負值，代表水平左移動，垂直向上移動
（2） rotate(deg)：旋轉
deg為正值：元素順時針旋轉
deg為負值：元素逆時針旋轉
（3）scale():縮放
scale(x,y):兩個值的時候：第乙個值表示x軸縮放的倍數，第二個值表示y軸縮放的倍數
乙個值的時候：表示x軸和y軸同時縮放的倍數
0~1，縮小
大於1,放大
負數：將元素翻轉之後再進行縮放
scalex(num):表示元素水平方向進行縮放
scaley(num):表示元素垂直方向進行縮放
（4） skew:傾斜
skew(deg)：兩個值時，第乙個值表示x軸的傾斜角度，第二個值表示y軸的傾斜角度
乙個值的時候：表示的是x軸傾斜的角度
skewx()x軸傾斜的角度
skewy()y軸傾斜的角度
在x軸傾斜的時候，以左下角為準，正值向右傾斜，負值向左傾斜
在y軸傾斜的時候，以左上角為準，正值向上傾斜，負值向下傾斜
transition-origin:變形原點，以某一點進行變換
兩個值：第乙個值x軸的位置 第二個值y軸的位置
乙個值：這個值表示x軸的位置 y軸預設是center
值：px 百分比 關鍵字（left，top， bottom，right，center）
乙個動畫可以有多個變形函式,復合寫法中間用空格隔開
transform:rotate(50deg) scale(1.5) translate(100px,200px) skew(30deg);
2、3d變形函式
（1）translatez(): 沿z軸進行移動，正值時沿z軸正向移動，負值時沿z軸負向移動
效果類似於2d中的縮放
ranslate3d（x,y,z）
（2）rotate:旋轉
①rotatex(deg) :沿x軸進行旋轉，以元素上邊框為準，正值時，往後面翻轉；負值時，往前面翻轉
②rotatey(deg) ：沿y軸進行旋轉，以元素左邊框為準，正值時，往右邊翻轉，負值時，往左邊翻轉
③rotatez(deg)：沿z軸進行旋轉，和2d中的rotate()效果一樣，正值時，順時針旋轉，負值時，逆時針旋轉
④rotate3d(x,y,z,deg)
x,y,z的取值為（1，0，-1）
（3）scalez(num) z軸方向上的縮放
scale(x,y,z)
（4） perspective：number | none
景深，定義3d元素距檢視的距離，以畫素計算（眼睛到螢幕的距離，遠小近大600-2000）。
當元素定義了perspective屬性後，其子元素獲得透視效果，而不是元素本身沒。
（5）transform-style:preserve-3d; 使其子元素繼承3d空間
建立3d空間呈現被巢狀的元素，該屬性必須和transform一起使用
flat：子元素將不保留其3d位置
preserver-3d：子元素保留其3d位置
可以定義多個狀態的變化
1, 定義動畫(定義狀態的變化過程)
@keyframes 動畫名字
25%50%
75%100%
}定義動畫不同的階段 % | from(0%) to(100%)
2, 幀動畫使用
復合寫法：
animation:name duration timing-function delay iteration-count direction;動畫庫：
前端學習日記10
新增模組 1 選擇器模組 2 邊框和背景 3 使用者介面 4 漸變 5 動畫 6 2d和3d 瀏覽器私有字首 瀏覽器廠商使用一種方式提前把屬性納為自己的標準,按時該屬性還沒有成為標準 字首 ie ms ms border radius chrome和safari webkit webkit bord...
前端學習日記12
1 lumn count 3 分欄的數量 2 column gap 50px 欄目和欄目之間的間距 3 column width 500px 欄目的寬度 4 column rule 5px dotted yellow 欄目和欄目之間的邊線 邊框一樣 5 column span all 標題橫跨的列數...
前端學習日記05
讓標籤相對於某個元素重新定義乙個新的位置，可以相對於元素本身的位置，或者相對于父元素，甚至相對於瀏覽器視窗進行定位 屬性 position 值 1 relative 相對定位 特點 相對於元素本身的位置 不脫離文件流,仍然佔位 使用場景 微調元素位置 2 absolute 絕對定位 相對於離他最近的...