1. 首頁 > 動漫 > >

|css3動畫教程詳解！

|css3動畫教程詳解！

文章圖片

|css3動畫教程詳解！

前幾節課我們已經講了關于2d轉換的相關知識 ， 其中包括移動、旋轉和縮放 ， 這節課我們就來講講HTML中css動畫的相關知識 。
1.css動畫和過渡的區別1）css過渡需要有一個事件觸發（像 :hover等） ， 才會起作用 ， 而css動畫不需要 。
2）動畫可以定義很多個關鍵幀 ， 而過渡不可以 。
3）用過渡和動畫做一個鼠標懸停時產生動效的效果 ， 當鼠標移開時 ， 用過渡做的效果會緩慢的變回原來的樣子 ， 而動畫是唰的一下變回原來的樣子 。

2.css動畫的基本操作：第一步 ， 需要定義動畫
@keyframes 動畫的名稱 <{p>0% <{p>動畫的起始位置

100% <{p>動畫的最終位置

第二步 ， 使用動畫：
首先使用animation-name調出動畫的名稱 ， 其次用animation-duration設置動畫的時長 。

3.css動畫實例：我們設置一個div元素 ， 并使元素能夠在頁面打開時 ， 從左向右移動 。
第一步 ， 設置一個div元素：

第二步 ， 我們先定義一個動畫 ， 動畫的起始位置為0 ， 向右移動了1000像素 ， 其中0%代表起始位置 ， 100%代表最終的位置 ， 我們通過translate設置圖像的移動 。

第三步 ， 定義好動畫之后 ， 我們就需要通過animation-name調用動畫的名稱和用animation-duration設置動畫的時長 。

【|css3動畫教程詳解！】這樣我們就完成了一個簡單的動畫效果 。

    相關經驗推薦