Css3動畫相關的屬性

定義：乙個元素的某些屬性從乙個狀態到另乙個狀態的變換

width:200px—->width:400px

transition: 要過渡的屬性 持續時間 延遲的時間 運動曲線；

transition：width 1s 0s linear

運動曲線：

勻速 linear

由快到慢 ease 預設值

由慢到快再到慢 ease-in-out

transition

:bgackground-color  1s  linear, width 1s linear ,height 1s linear;
transition
:all 1s linear;  all關鍵字是瀏覽器自動設定所有觸發的屬性的過渡
復合寫法
transform：translatex（100px）scale（2）skewx（15deg）；

平移translate

transform

:translate
(x,y);x
:水平平移  +x 水平向右平移  -x水平向左平移
y:垂直平移  +y 垂直向下平移  -y垂直向上平移

順時針

:+角度  deg度數 
transform
:rotate
(45deg)
;逆時針
:-角度 
transform
:rotate
(-45deg)

2d變形預設的變形中心是盒子的中心點 transform-origin:50% 50%/center center;

transform-origin

:xpx ypx / % % /right center left top bottom

transform

:scale
(m,n)
;  m代表寬度縮放倍數  n代高度的縮放倍數
m=0.5 寬度縮小為原來的一半(0.5倍)
m=2  寬度放大到原來的2倍   >1放大  <1縮小
transform
:scale
(t); t<0 影象會翻轉

transform

:skew
(x,y)
;  +deg向座標軸的正方向的反方向傾斜  -deg 向座標軸的正方向傾斜
x代表水平方向切斜的度數
y代表垂直方向傾斜的度數

1、定義動畫

@keyframes 動畫名

to//動畫有多個關鍵幀 n個
0%20%
50%75%
100%
}

animation：動畫的名稱 持續的時間 延時時間 運動曲線 執行次數 是否往返運動 最後一幀完成後的狀態 動畫的運動狀態

動畫的名稱: animation-property:move;

持續的時間 animation-duration:5s;

延時時間 animation-delay:2s;

運動曲線 animation-timing-function:linear勻速/ease放緩（預設值）/ease-in/ease-in-out

執行次數 animation-iteration-count:2/infinite無限次

是否往返運動 animation-direction:normal正常/alternate反向

最後一幀完成後的狀態 animation-fill-mode:forwards動畫最後的狀態保持最後一幀/backwords初始狀態(預設值);

動畫的運動狀態 animation-play-state:running/paused;

css3動畫屬性

定義動畫 from to 等同於0 100 keyframes myfirst to webkit keyframes myfirst safari 和 chrome to 將動畫繫結到選擇器 div keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性，除了 animation...

CSS3動畫屬性

2d 3d 轉換屬性 transform 過渡屬性 transition 動畫屬性 animation transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。2d轉換 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。tra...

css3動畫屬性

1.變形的基點，在使用transform方法進行文字或影象變形的時候，預設是以元素的中心點為基準點進行變形的，使用transform origin屬性，可以改變變形的基準點，語法 transform origin left,center 2.移動動畫，方法語法 transform translate...