CSS3動畫原理：

就是通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。

步驟：

在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現：

第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，比如懸浮狀態；
第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。

CSS3的過度transition屬性是一個復合屬性

主要包括以下幾個子屬性：

transition-property:指定過渡或動態模擬的CSS屬性 transition-duration:指定完成過渡所需的時間 transition-timing-function:指定過渡函數 transition-delay:指定開始出現的延遲時間

舉例：

HTML：

<div></div>

CSS：

div {width: 200px;height: 200px;background: red;margin: 20px auto;transition-duration:.5s;transition-timing-function: ease-in;transition-delay:.18s; } div:hover {width: 400px;background:blue; }

過度函數解釋：

指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：

實際開發中我們是用 Keyframes，Keyframes被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

舉例

@keyframes changecolor{0%{background: red;}100%{background: green;}}

在一個“@keyframes”中的樣式規則可以由多個百分比構成的，如在“0%”到“100%”之間創建更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。

HTML代碼

<div><span></span></div>

CSS代碼

@keyframes around{0% {transform: translateX(0px);}25%{transform: translateX(180px);}50%{transform: translate(180px, 180px); }75%{transform:translate(0,180px);}100%{transform: translateY(0);}}div {width: 200px;height: 200px;border: 1px solid red;margin: 20px auto;}div span {display: inline-block;width: 20px;height: 20px;background: orange;border-radius: 100%;animation-name:around; //在這里要調用keyframes 起的名字aroundanimation-duration: 10s; //指定完成過渡所需的時間為10秒animation-timing-function: ease; //指定過渡函數為easeanimation-delay: 1s; //指定開始出現的延遲時間是1秒animation-iteration-count:infinite; //動畫將會無限次的播放}

解釋部分語句：

一、animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

二、animation-iteration-count屬性主要用來定義動畫的播放次數。
1、其值通常為整數，但也可以使用帶有小數的數字，其默認值為1，這意味著動畫將從開始到結束只播放一次。
2、如果取值為infinite，動畫將會無限次的播放。

總結

以上是生活随笔為你收集整理的CSS3动画(典型模板)的全部內容，希望文章能夠幫你解決所遇到的問題。

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