###讓我們一起來探索 transiton(過渡), transform(變化) , animation(動畫)屬性吧！
###transiton(過渡)transition 屬性簡寫：transition: property(過渡的css屬性) duration(持續時間) timing-function(過渡型別) delay(延遲過渡時間);
預設值：transition：all 0 ease 0
詳細屬性值：transition-property : //設定過渡效果的 css 屬性的名稱 transition-duration: //指定這個過渡的持續時間 transition-delay: //延遲過渡時間 transition-timing-function: 指定過渡型別，linear //線性過度，ease-in //由慢到快，ease-out //由快到慢，ease-in-out //由慢到快在到慢，cubic-bezier//貝塞爾曲線
demo:滑鼠移動到div上出發hover事件出發背景的過渡動畫
###transform(變化) transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
預設值transform: skew(35deg) scale(1, 0.5) rotate(45deg) translate(10px, 20px); skew(傾斜) scale(縮放) rotate(旋轉) translate(偏移)元素變化過渡的起始位置語法：transform-origin: x-axis y-axis z-axis; 值: transform-origin：top left || 0% 0%//設定為左上點 參考：transform-orgin屬性
詳細屬性:translate(x,y) 位置偏移translatex(x) 沿x軸偏移 translatey(y) 沿y軸偏移
scale(x,y) 縮放scalex(x) 沿 x 軸的值來進行縮放 scaley(y) 沿 y 軸的值來進行縮放
rotate(angle) 定義 2d 旋轉,在引數中規定角度
skew(x-angle,y-angle) 傾斜skewx(angle) 定義沿著 x 軸傾斜 skewy(angle) 定義沿著 y 軸傾斜
matrix(n,n,n,n,n,n) 定義 2d ,使用六個值的矩陣 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3d ,使用 16 個值的 4x4 矩陣
translate3d(x,y,z) 定義 3dtranslatez(z) 定義 3d ,只是用 z 軸的值
scale3d(x,y,z) 定義 3d 縮放scalez(z) 通過設定 z 軸的值來定義 3d 縮放
rotate3d(x,y,z,angle) 定義 3d 旋轉rotatex(angle) 定義沿著 x 軸的 3d 旋轉 rotatey(angle) 定義沿著 y 軸的 3d 旋轉 rotatez(angle) 定義沿著 z 軸的 3d 旋轉
**demo: 滑鼠移入觸發變化並形成過渡效果
詳細屬性相容性寫法@keyframes mymove{} @-moz-keyframes mymove /* firefox /{} @-webkit-keyframes mymove / safari 和 chrome /{} @-o-keyframes mymove / opera */{}**
demo:快樂的製作自己的呼吸燈效果
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...
CSS3 過渡 動畫
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容 應用於寬度屬性的過渡效果，時長為 2 秒 div 注釋 如果時長未規定，則不會有過渡效果，因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...
CSS3寫過渡動畫
過渡動畫定義 通過css3，是乙個元素的樣式轉為另乙個樣式時為該元素新增效果 語法 transition transition property transition duration transition timing function transition delay 屬性值 transitio...