【逆戰班】
動畫可以讓乙個元素具有動態的效果，這個過程是使元素從一種樣式變成另乙個樣式的過程。我們可以通過設定關鍵幀的方法來控制動畫在某個時間節點的運動方式。通常設定多個節點來實現複雜的動畫效果。0%是動畫的開始時間，100%是動畫的完成。
一、 transition（過渡）
transition主要包含四個屬性：
執行變換的屬性：transition-property
規定設定過渡效果的css屬性的名稱。all ( 預設值 ) , 指定 width , height;
速率變化：transition-timing-function
規定速度效果的速度曲線。運動形式：加速、減速、勻速…
liner（勻速）
ease（預設值）
ease-in（加速）
ease-out（減速）
ease-in-out（加速然後減速）
cubic-bezier（自定義屬性值）
下面來做乙個簡單的案例：
首先定義乙個容器
"box"
>
<
/div>
<
/body>
#box:hover
二、animation（動畫）
1.定義動畫軌跡
@keyframes name
100%
}
animation-name : 設定動畫的名字
animation-duration : 動畫的持續時間
animation-delay : 動畫的延遲時間
animation-iteration-count : 動畫的重複次數 ，預設值就是1 ，infinite無限次數
animation-timing-function : 動畫的運動形式
liner（勻速）
ease（預設值）
ease-in（加速）
ease-out（減速）
ease-in-out（加速然後減速）
#box2
三、transform（變形）
translate : 位移
transform:translate(x,y); 元素向指定點移動
transform:translatex(x);元素沿x軸移動
transform:translatey(y); 元素沿y軸移動
transform:translatez(z); 元素沿z軸移動（3d）
scale : 縮放
transform:scale(num) num是乙個比例值，正常比例是1。
transform:scale(num1 , num2) 兩個值 分別對應寬和 高
transform:scalex()通過設定x軸的值來定義縮放轉換。
transform:scaley()通過設定y軸的值來定義縮放轉換。
transform:scalez()通過設定z軸的值來定義 3d 縮放轉換。
rotate : 旋轉
transform:rotate(num) num是旋轉的角度 單位：deg ，正值：順時針旋轉，負值：逆時針旋轉
rotatex()定義沿著 x 軸的3d旋轉。
rotatey()定義沿著 y 軸的3d旋轉。
rotatez()定義沿著 z 軸的3d旋轉。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，針對的是x 和 y
transform:skewx()定義沿著 x 軸的傾斜轉換。
transform:skewy()定義沿著 y 軸的傾斜轉換。
注：skew沒有3d寫法。
tranform-origin:基點
tranform-origin（x,y,z）設定元素運動基點，預設值：center,center,0
@keyframes name
25%50%
75%100%
}
perspective(景深) : 離螢幕多遠的距離去觀察元素，值越大幅度越小。
transform-style : 3d空間：flat (預設值2d)、preserve-3d (3d，產生乙個三維空間)
perspective-origin : 景深-基點位置，觀察元素的角度。取值：left、right、top……
backface-visibility : 背面隱藏 hidden、visible (預設值)
css中transition過渡基本屬性
本週經過在逆戰班的學習，又學到了很多的知識點，今天我來總結下css3中過渡語法的基本屬性 css動畫 transition過渡的講解 一，css動畫主要分為兩種 transition過渡和animation動畫 transition可以實現一種動畫效果，1，transiton中又有以下屬性 tran...
CSS3的變形 過渡 動畫 關聯屬性
transform 可以對元素物件進行旋轉rotate 縮放scale 移動translate 傾斜skew 矩陣變形matrix。示例 transform rotate 90deg scale 1.5,0.8 translate 100px,50px skew 45deg,45deg 矩陣變形 m...
CSS基本屬性
一 visibility屬性 display none 隱藏元素 visibility 顯示 隱藏的 取值 1 visible 預設的可見的 2 hidden 隱藏 依然佔據頁面空間 3 collapse 使用在 元素上 刪除一行和一列的時候不影響 的整體布局 diplay 和 visibility...