1. 程式人生 > >前端基礎學習筆記 過渡、動畫和變換

前端基礎學習筆記 過渡、動畫和變換

過渡 transition

讓屬性變化成為一個持續一段時間的過程,而不是立即生效的

可能的屬性:

執行變換的屬性: transition-property,  
變換延續的時間: transition-duration,  過渡延遲的時間:transition-delay


在延續時間段,變換的速率變化 transition-timing-function,  
       linear: 勻速 
       ease:(預設值) 慢快慢 
       easein

: 慢入 
       easeout: 慢出 
       easeinout: 慢入慢出 
       cubicbezier 貝塞爾曲線( x1, y1, x2, y2 )

而我們通常會用簡寫方式(一般直接用這個):

transition:width 2s, height 2s, background-color 2s, transform 2s;

多個屬性過渡的時候 用逗號隔開! 
display不支援過渡    淡入淡出最好用opacity

動畫 animation

可以為從一個CSS樣式配置到另一個CSS樣式配置的動畫製作動畫。動畫包含兩個元件,一個描述CSS動畫的樣式和一組指示動畫樣式的開始和結束狀態的關鍵幀,以及可能的中間路標。

可能的值:

animation­name  動畫名稱  
animation­duration  持續時間  
animation­delay  延遲時間  
animation­timing­function  運動曲線  
animation­iteration­count  規定動畫播放次數!  
infinite無限重複 或者number 
animation­direction  規定輪流反向播放動畫!  
normal: (預設) 正常方向 
reverse: 反方向執行 
alternate : 動畫先正後反方向執行 
alternate reverse: 先反後正方向

animation-name動畫名稱

div{
    /*動畫:動畫名稱 動畫持續時間*/
    animation: move 2s;
}

規定動畫如何運動,繫結動畫,注意寫法:

@keyframes move{
    from{width:100px;backrgound:red;}
    to{width:500px;background:blue;}
    /*0%{} 100%{}*/
}

animation-play-state: 動畫執行狀態

paused 暫停動畫
running 執行動畫
animation-fill-mode: 規定動畫的第一幀和最後一幀的狀態!通俗的講就是動畫結束之後保持
什麼狀態  
none (預設) 原始狀態>動畫>原始狀態 
forwards 原始狀態>動畫>停在動畫幀100% 
backwards (忽略原始狀態)進入動畫幀0%>動畫>原始狀態 
both (忽略原始狀態)進入動畫幀0%>動畫>停在動畫幀100%

變換

屬性允許你修改CSS視覺格式模型的座標空間。使用它,元素可以被轉換(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)

1.旋轉rotate

這裡面的值可以是(角度deg)(圈turn)(弧度rad)(梯度grad) 只是佔據自己的位置,不會影響其他元素的位置

div{
    transform:rotate();
}

2.變換焦點 transform-origin

具體的值 
百分比值 
left / top / right / bottom / center

div{
    /*這裡要注意的是:不要寫在hover樣式裡面,而是本身元素裡面。預設是中心點 用空格隔開
    */
    transform-origin:x y;
}

3.縮放 scale

放大和縮小的倍數 不支援負值!

div{
    transform:scale(1.2);
}

4.位移 translate

div{
    /*兩個值寫法 中間用逗號隔開*/
    transform:translate(X,Y);
    /*一個值寫法*/
    transform:translateX();
    transform:translateY();
}

5.傾斜

不同於旋轉,可以用度數,弧度 角度 梯度控制 ,當到一個臨界點的時候會消失不見

div{
    transform:skew(30deg,30deg);
}

6.複合寫法

transform 不同的值用空格隔開 括號裡面用逗號隔開

div{
    transform:translate(50px,50px) scale(1.2);
}

允許調整大小

注意:必須要新增overflow:;屬性 因為overflow重新檢測盒子裡面的內容
overflow值可以是: 
預設visible 
hidden 隱藏 
auto 根據內容決定是否滾動條 
scroll 滾動條

resize:

none 預設 
horizontal 水平可以縮放 
vertical 垂直可以縮放 
both 垂直水平都能縮放

舞臺

觀眾離介面的距離

body{
    perspective:800px;
}

計算calc()

calc(),你就可以通過計算來決定一個CSS屬性的值,可以用在任何長度,數值,時間,角度,頻率
等處。
.
可以使用  + - * /  四則運算 也可以加括號 
運算子號前後必須要有空格 
在實際的開發中需要加上相容性字首,字首加在 calc 前面 
而真正在計算的時候 我們要把所有的距離都考慮進去 如:邊框 內邊距 等…

div{
    width:-webkit-calc(100% - (100px - 50px));
    width:-moz-calc(100% - (25px * 2));
}