css動畫效果位置移動 CSS 高階之動畫

前端基礎16課--從入門到放棄 - 網易雲課堂study.163.com

我們都知道動畫電影由一幀一幀的靜態畫面拼接而成，一秒動畫有24幀畫面，如果低於24幀，人眼即可感知畫面切換，就會有卡頓的感覺。

css 中，如果按一秒24幀的畫法來寫**，未免太過繁瑣。所以我們把動畫拆解為動作(transition)，乙個動作表示從乙個狀態到另乙個狀態的變化，然後把一組動作串起來，即是 css 中的動畫(animation)

例如：

css 動畫

上圖中，藍球的動畫可以分解為四個動作：向右，向下，向左，向上；

下面來詳細的講一下動作和動畫

transition 直譯為過渡，即給屬性變化新增過渡效果。

我們知道，如果兩個樣式屬性被賦在同乙個元素上，後乙個樣式屬性會覆蓋前乙個，比如：

.blueball .blueball:hover

當我們把滑鼠放在藍球上時，藍球會立刻變透明

普通的屬性變化

而如果我們給藍球增加 transition 屬性，其透明度變化會有乙個過渡

帶過渡效果的屬性變化

這裡的 transition 屬性其實是乙個簡寫形式，它由四部分組成，分別是（冒號後為預設值）：

transition-property: all; /* 過渡屬性 */ transition-duration: 0; /* 耗時 */ transition-timing-function: ease; /* 效果，預設 ease（緩入緩出） */ transition-delay: 0; /* 延遲 */

如果考慮到預設值，上面過渡效果的例子中，可以進一步簡寫成transition: 1stransition 可以同時給多個屬性新增過渡效果，比如可以在移動元素的同時，改變其透明度。但不管有多少個屬性同時在變化，這種過渡效果只能是一次性的，也就是單個動作.

transition 只能做單個動作，如果動畫包含多個動作，這時候就需要 animation

我們先來看個例子：

這個動畫明顯由兩個動作組成：藍變綠，綠變橙。

兩個連續的線段有三個關鍵點，兩個連續的動作必然也有三個關鍵幀（keyframe），我們通過定義這三個關鍵幀（起點，藍變綠，終點）來定義這兩個動作。

我們來看一下這個動畫的 css **

.blueball /* 三個關鍵幀：起點（藍色），藍變綠，終點（橙色） */ @keyframes forward 50% 100%

}

@keyframes中的百分比，代表時間尺度上的百分比，後面跟著的是此時間點的樣式。

同樣的，animation: forward 4s;也是簡寫形式，完整的 animation 屬性包括（冒號後為預設值）：

animation-name: none; /* 動畫名稱 */ animation-duration: 0; /* 耗時 */ animation-timing-function: ease; /* 效果，預設緩入緩出 */ animation-delay: 0; /* 延遲 */ animation-iteration-count: 1; /* 迴圈次數 */ animation-direction: normal; /* 正放 or 倒放 */

css 動畫的知識點，就這麼些，但目前看來，我們只能動動元素的大小，位置，透明度，顏色什麼的，有點單調。為了給動畫加點料，下面介紹一下transformtransform 直譯為變換，雖然名字和 transition 有點像，但是它和動畫無關。transition 是乙個狀態到另乙個狀態的變化過程，而 transform 僅僅是靜止的最終狀態。

例如：如果想把藍球從水平排列中，向下移動100px

transform 位移

即可以使用相對定位

.blueball

也可以使用 transform

.blueball

它們的效果是一致的，都是把藍球向下移動 100px

除了位移，tranform 還可以做很多變換

每種變換的具體引數說明可以參照 w3school 文件

這裡有幾點需要說明

1、transform 原點位於元素中心

我們知道 css 元素預設的座標系，原點在左上角；而 transform 變換的原點位於元素中心

transform 座標系

圖中亦標識了繞軸旋轉（rotate）時的預設方向，為了便於記憶，你可以理解為：你站在原點位置，看向正軸方向，預設旋轉方向為逆時針旋轉

2、理解 skew（傾斜）

skew 傾斜變換並不直觀，為了便於記憶，你可以這樣想像：你拉住了矩形的右下角，左右橫拉，即是沿x軸傾斜

同樣的，skewy 即是抓住右下角上下拉

3、理解 perspective（透視）

perspective 表示透視距離，可簡單理解為眼睛離螢幕的距離

transform: translatez(100x); /* 向z軸正向移動 100px */
perspective: 200px; /* 透視距離 200px */

我們用一張圖來說明一下

transform 透視

其它變換屬性比較好理解，除了matrix（這個需要單獨開一篇來講），就不再一一綴述

最後以乙個動畫來結束這篇文章吧，想一想用到了哪些方法

人生如汪

**在這裡：try it on codepen

css動畫效果位置移動 CSS 高階之動畫

css 平移到某個位置 CSS3平移動畫效果

CSS動畫效果

CSS動畫效果

css動畫效果 位置移動 CSS 高階之動畫

css 平移到某個位置 CSS3平移動畫效果

CSS動畫效果

CSS動畫效果

相關推薦

css動畫效果位置移動 CSS 高階之動畫