css3的過渡動畫和2d變換筆記

2022-09-14 04:15:14 字數 696 閱讀 8099

1.過渡

transition-property

指定過渡動畫的屬性(並不是所有的屬性都可以動畫)

transition-duration (指定的屬性多餘動畫指定的多個時間時,動畫時間列表會複製 少了會裁剪)

指定過渡動畫的時間(0也要帶單位)

transition-timing-function

指定過渡動畫的形式(貝塞爾)

transition-delay

指定過渡動畫的延遲

transition

第乙個可以被解析成時間的值會賦給transition-duration

transtionend事件(dom2)

在每個屬性完成過渡時都會觸發這個事件

當屬性值的列表長度不一致時

跟時間有關的重複列表

transition-timing-function使用預設值

2.2d變換(transform

rotate

旋轉translate

平移skew

斜切scale

縮放變換組合!

順序是從右往左的,變換的底層其實就是矩陣的運算 (從右開始碰到縮放的話之後碰到平移的也會一起縮放)

基點的變換

transform-origin

CSS3屬性(過渡,2D變換,3D變換,動畫)

在css3中,我們如果不使用js 或者flash動畫,想要實現元素從a狀態變成b狀態,並且中間的過程可以被觀察到,那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...

css3 過渡和2d變換 回顧

1.transition 語法 transition property duration timing function delay transition property 設定過渡效果的css 屬性名稱 語法 transition property none all property none 沒...

CSS3漸變 過渡 2d變換

寫法 一 background gradient linear,起點 水平 垂直 終點,color stop 開始漸變的位置,顏色 注 color stop 開始漸變的位置,顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...