CSS3過渡和動畫

1、transition 過渡

過渡效果通常由瀏覽器直接改變元素的CSS屬性實現，從一種狀態過渡到另外一種狀態。

在CSS中建立簡單的過渡效果能夠從如下幾個步驟來實現：

第1、在默認樣式中聲明元素的初始狀態樣式；

第2、聲明過渡元素最終狀態樣式，好比懸浮狀態；

第3、在默認樣式中經過添加過渡函數，添加一些不一樣的樣式。

transition 是一個簡寫屬性，用於設置四個過渡屬性：

transition: 2s 3s all linear; (過渡時間 延遲時間 屬性 速度)

下面的表格列出了全部的轉換屬性：

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

實例：

在一個例子中使用全部過渡屬性：

2、animation 動畫

CSS3 @keyframes 規則

如需在 CSS3 中建立動畫，您須要學習 @keyframes 規則。

在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。

一、什麼是 CSS3 中的動畫？

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。

您能夠改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

二、CSS3 動畫屬性

animation: 自定義名字 持續時間 動畫類型 延遲時間 次數;

下面的表格列出了 @keyframes 規則和全部動畫屬性：

實例：

改變背景色和位置：

運行名爲 myfirst 的動畫，其中設置了全部動畫屬性：

若是你們以爲個人文章寫的還不錯的話，就關注 收藏一下哦！

你們能夠一塊兒探討下前端問題呀！

rgz987