進入css3動畫世界（二）

2022-04-02 02:12:03 字數 1591 閱讀 7781

今天主要來講transition和transform入門，以後會用這兩種屬性配合做一些動效。

注：本文面向前端css3動畫入門人員，我對這個也了解不深，如本文寫的有紕漏請指出，不喜勿噴。

從中文翻譯來講，這是乙個過渡屬性，而這個屬性的屬性值有四種：

transition: property duration timing-function delay

第乙個是起作用的屬性名，第二個是動畫持續的時間，第三個是速度效果的曲線，第四個是過渡效果延遲多久後開始。

而我經常用的是第二個屬性值，其次是速度曲線。

下面我們用hover試下不同的效果：

**原始碼：**

```html

改變寬度

持續3秒

勻速3秒

延遲1秒

```

.idiv


#change-width


#change-width:hover


#dur-3s


#dur-3s:hover


#linear


#linear:hover


#delay-1s


#delay-1s:hover
transform的意思是變換。

我們暫時只討論2d情況下的transform，當然還有乙個skew()我沒怎麼用過。

translate()是平移,translatex(x)沿著x軸平移,translatey(y)沿著y軸平移,translate(x,y)沿著xy軸同時平移：

```html

div1 x平移

div2 y平移

div3 xy平移

```

.idiv


#div1:hover


#div2:hover


#div3:hover
rotate()是旋轉，2d的情況下，rotate()只接收乙個角度作為引數。

順時針旋轉30°


順時針旋轉60°


順時針旋轉90°


逆時針旋轉30°


逆時針旋轉60°


逆時針旋轉90°


.idiv


#rotate30:hover


#rotate60:hover


#rotate90:hover


#rotate-30:hover


#rotate-60:hover


#rotate-90:hover
scale()是縮放，和translate()一樣，接收1-2個引數。scalex(x)，scaley(y)，scale(x,y):

x軸放大到1.5倍


y軸縮小到0.5倍


xy軸放大到2倍


.idiv


#scalex:hover


#scaley:hover


#scalexy:hover

進入css3動畫世界（一）

其實我做css3動畫也沒有多久，這篇文章目標人群是css3動畫的新手，不喜勿噴。目前我接觸到的css3動畫有2類 一種是transition的，另一種是 keyframes的。兩者的區別就是，transition的動畫表達是從一種狀態到另一種狀態，而 keyframes更加靈活，乙個動畫可以在不同進...

css3動畫（從上 左下 左 右進入頁面）

動畫 start animated animated02 逐漸顯示 toshow 放大效果 enlarge 從上到下進入 fadeindown 從下到上進入 fadeinupleft 從右到左進入 fadeinright 從左到右進入 fadeinleft 中心旋轉 corerotate keyfr...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...