大家好，歡迎來到雄雄的小課堂，前面，我們將CSS的變形和過渡都整理了，有需要的可以移步這里看：

CSS3中的動畫示例

CSS3的幾個變形案例……

今天，我們來看看CSS3的動畫。

CSS3使用動畫分為兩個步驟：

1.通過類似flash動畫的關鍵幀來聲明一個動畫。

2.在animation屬性中調用關鍵幀聲明的動畫，實現一個更為復雜的動畫效果。

接下來我們具體來看看CSS3是如何實現動畫的？

01

設置關鍵幀

在CSS3中，把@keyfreams成為關鍵幀，這個關鍵幀可以設置多段屬性，其語法為：

@keyfreams?name{from{//CSS代碼}percentage{//CSS 代碼}to{//CSS 代碼}}

也可以將from、percentage和to換成百分比，如下：

@keyfreams?name{0%{//CSS代碼}50%{//CSS 代碼}100%{//CSS 代碼} }

語法解析：

name:動畫的名稱，通過該名稱來調用該動畫

percentage（50%）：是一個百分比，主要用來定義某個時段的動畫效果。

下面我們來看一段代碼：

Html代碼：

<div style="background: darkgoldenrod;"?id="div7">

CSS樣式代碼：

/*聲明一個動畫*/@keyframes?name{0%{width: 200px;height: 200px;background: yellow;}50%{width: 400px;height: 400px;background: green;}75%{width: 500px;background: black;}100%{width:600px?;height: 600px;background: cornflowerblue;}}

02

調用動畫

@keyfreams只是用來聲明動畫效果的，但是如果不調用它的話，它就不會起什么效果，下面我們來看看怎么通過animation來調用動畫。

語法：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

語法好長，下面來解釋一下吧。

animation-name：調用的動畫名稱

animation-duration animation-timing-function animation-delay：分別是過渡時間，過渡方式，延遲時間。

animation-iteration-count：動畫的播放次數，可以是整數，如果是infine的話，則是無限循環。

animation-direction：動畫播放的方向，normal表示向前播放，alternate表示一前一后（播放次數偶數向前播放，奇數則反方向播放）。

animation-play-state：動畫的播放狀態，running和paused.

下面我們來看看調用動畫的代碼：

#div7:hover{animation:name 1s?infinite alternate ease-in-out;}

效果如圖所示：

往期精彩

CSS3中的動畫示例

2020-11-19

CSS3的幾個變形案例……

2020-11-18

jsp中使用cookie時報錯……

2020-11-17

Java中的TreeSet集合會自動將元素升序排序

2020-11-16

“老師，請您多關注一下我吧！！！”

2020-11-15

晨讀，難道只是為了完成任務而讀的嗎？

2020-11-14

點分享

點點贊

點在看

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS动画示例（上一篇是CSS过渡…）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。