CSS動畫樣式

2022-08-13 08:51:15 字數 717 閱讀 3826

transform:對物件屬性進行動畫編輯(可用於有漸變效果的動畫)

一、transition:動畫的過度效果

注:始終設定 transition-duration 屬性,否則時長為 0,就不會產生過渡效果。

transition的屬性值及其用法:

1.transition-property  規定設定過渡效果的 css 屬性的名稱。

2.transition-duration  規定動畫過度需要的時間

3.transition-timing-function  動畫的過度曲線

注:linear:用於相同速度開始至結束的過渡效果

4.transition-delay  動畫何時開始

二、translate:動畫的平移效果

屬性值可加x y z 點的座標

transform:translatex(50px)     //向右平移50px

三、scale:動畫的旋轉

transform:rotate(9deg)   //旋轉9度

具體事例

用transform設定的緩慢進入

var  obj=documen.getelementbyclassname("classname")[0];

obj.setattribute("class",obj.getattribute("class")+" classname2");

css動畫樣式

1.漸變 線性漸變 background linear gradient red,blue 預設從上到下 可多個顏色 background linear gradient to right,rgba 255,0,0,0 rgba 255,0,0,1 到右 透明色漸變 background linea...

css3動畫樣式總結

語法格式 transition 要過渡的屬性 花費時間 運動曲線 何時開始 屬性描述 transition 簡寫屬性,用於在乙個屬性中設定四個過渡屬性。transition property 規定應用過渡的css屬性的名稱。transition duration 定義過渡效果花費的時間。預設是0。t...

通過css樣式實現精靈動畫

keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。這裡用到animation來切換css的背景 第乙個引數作用於每兩個關鍵幀之間,這裡指切換方式是一幀一幀改變。第二個引數start或end,2個引數都會選擇性的跳過前後...