CSS3 動畫是設計網頁的重要一環,其中緩慢移動效果是常見的一種。實現這種效果,主要需要用到 transition 屬性。下面是一個簡單的例子:
.box { width: 100px; height: 100px; position: absolute; left: 0; top: 0; transition: left 2s ease-in-out; } .box:hover { left: 300px; }
上面的代碼中,我們定義了一個名為 box 的元素,其屬性包括寬度、高度、位置和動畫效果。其中 transition 屬性被設置為 left 2s ease-in-out,表示 left 屬性的變換需要用 2 秒來完成,并且采用 ease-in-out 緩動函數。這個函數的特點是慢開慢關,即初速度和末速度較慢,而中間速度較快。
在 hover 狀態下,我們將 left 屬性的值設為 300 像素,從而觸發動畫效果。因為我們設置了緩動函數,所以元素會逐漸移動到目標位置,速度在不斷變慢直到最終停留。
需要注意的是,transition 屬性只能控制可動畫屬性的變換,而且需要在 hover 等觸發事件發生后才能起作用。此外,我們還可以設置多個屬性的動畫效果,如下:
.box { width: 100px; height: 100px; position: absolute; left: 0; top: 0; transition: left 2s ease-in-out, top 2s ease-in-out; } .box:hover { left: 300px; top: 200px; }
上面的代碼中,我們在 transition 屬性中同時設置了 left 和 top 屬性的變換效果,它們的動畫時間和緩動函數相同。當我們觸發 hover 事件時,這個元素會同時在左右和上下兩個方向上移動。
上一篇css3 動畫旋轉代碼
下一篇css3 動畫流暢