CSS 3動畫介紹

原文：a beginner』s introduction to css animation

譯文：乙個初學者對css動畫的介紹

譯者：dwqs

在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案例。

先看看效果：

css動畫主要的元件是@keyframes，這個規則就是用來建立動畫的。將@keyframes當作是時間軸的不同階段，在其內部，你可以自定義時間軸的不同階段，每個階段有不同的css宣告。

然後，為了使css動畫生效，需要將@keyframes和乙個選擇器繫結。最後將會逐漸解析@keyframes內的全部**，以階段為劃分，慢慢改變把最初的樣式變成新的樣式。

首先，定義動畫的分隔。@keyframes的屬性如下：

1、選擇乙個名字（在案例我選擇tutsfade）

2、階段劃分：0%–100%，從0%到100%

3、css樣式：你想要在每乙個階段用到的樣式

例如：

@keyframe tutsfade
100%
}      或者：
@keyframe tutsfadeto}

還有一種簡寫形式:

@keyframe tutsfade
}

上述**將對元素的透明度應用乙個過渡效果:從1到0，三種方式最終的效果相同。

animation作為乙個選擇器去呼叫@keyframes。animation有很多的屬性：

1、animation-name：@keyframes的名字（例如tutsfade）

2、animation-duration：動畫持續的時間

3、animation-timing-function：設定動畫的速度特效，可以選擇linear/ease-in/ease/ease-out/ease-in-out/cubic-bezier

4、animation-delay：動畫開始之前的時間延遲

5、animation-iteration-count：動畫迴圈的次數

例如：

.element

簡寫：

.element

需要新增特定瀏覽器的私有字首以確保最好的瀏覽器支援：chrome&safari:-webkit-;firefox:-moz-;opera:-o-;ie:-ms-

修改如下：

.element

@keyframes也一樣

@-webkit-keyframes tutsfade @-moz-keyframes tutsfade @-ms-keyframes tutsfade @-o-keyframes tutsfade @keyframes tutsfade

為了得到更多瀏覽器**商的私有字首，你可以去查詢，上面提供了非常豐富的資源。

可以新增多個動畫，各個動畫之間用逗號分隔。

.element 
@keyframes tutsfade 
}@keyframes tutsrotate 
}

利用上面的規則，我將建立乙個簡單的圖形動畫。總共會有5個階段，並且在每個階段都會對元素定義不同的border-radius,rotation和background-color。

div

建立乙個名為square-to-circle的keyframe元素，包含5個階段

@keyframes square-to-circle 25% 50% 75% 100%

}

將定義的動畫應用之前的div

div

最後要新增的乙個動畫屬性是animation-timing-function,它對動畫元素的速度、加速和減速進行定義。乙個類似的工具是：css easing animation tool，可以使用它來計算時間函式。

在案例中，我給動畫新增了乙個cubic-bezier函式。

div

為了保證最好的瀏覽器支援，還必須新增私有字首（沒有新增字首的**如下）

div @keyframes square-to-circle 25% 50% 75% 100%

}

這個在firefox顯示會有點異常，為了在firefox有絕佳的顯示效果，可以給div新增如下樣式

outline: 1px solid transparent;

原文首發：

CSS3動畫屬性簡單介紹

css3的動畫屬性下面的列出了 keyframes 規則和所有動畫屬性屬性描述 css keyframes 規定動畫。3 animation 所有動畫屬性的簡寫屬性，除了 animation play state 屬性。3 animation name 規定 keyframes 動畫的名稱。...

CSS3的動畫 animation介紹

這篇是關於簡單的css3 animation介紹，適合小白作為動畫了解的入門篇。為了在專案中使用動畫，只需要做兩件事 01建立動畫 02將其連線到必須設定動畫的元素，並指示所需的功能動畫是一組關鍵幀，它們儲存在css中，我們先看一段簡單的動畫段 keyframes test animation ...

CSS3動畫Keyframes的介紹

css3為animation動畫提供的幾個屬性如下 animation name 指定動畫名稱，該屬性指定乙個已有的關鍵幀定義。animation duration 指定動畫持續時間。animation timing funtion 指定動畫變化速度。animation delay 指定動畫延遲多長...

CSS 3動畫介紹

CSS3動畫屬性簡單介紹

CSS3的動畫 animation介紹

CSS3動畫Keyframes的介紹

相關推薦