css入門 CSS動畫入門

css入門

在本教程中，我將向您介紹css動畫。一種高效能的做事方式，隨著瀏覽器支援的提高而越來越流行。在介紹了基礎知識之後，我們將構建乙個簡單的示例，該示例會將乙個正方形元素動畫化為乙個圓形：

在envato市場的設計師們一直忙於創造了一系列的css動畫，為你插上你的**，從陰影到彩帶，滑塊等。

您還可以在envato studio上聘請css專家，以為您的專案提供廣泛的修復和自定義幫助。

css動畫的主要元件是@keyframes，這是建立動畫css規則。將@keyframes視為時間軸上的各個階段。在@keyframes內部，您可以定義這些階段，每個階段都有不同的樣式宣告。

接下來，要使css動畫起作用，您需要將@keyframes繫結到選擇器。這將逐步解析@keyframes宣告中的所有**，並根據階段將初始樣式更改為新樣式。

在這裡，我們將設定動畫階段。我們的@keyframes屬性為：

例如：

@keyframes tutsfade 
100% 
}

要麼：

@keyframes tutsfade 
to }

或速記：

@keyframes tutsfade 
}

上面的**將對元素的不透明度進行過渡，從opacity: 1到opacity: 0。上面的每種方法都會達到相同的最終結果。

animation屬性用於在css選擇器中呼叫@keyframes。動畫可以具有多個屬性：

例如：

.element

或速記：

.element

上面的**將建立乙個閃爍效果，動畫延遲為1秒，動畫總持續時間為4秒，具有交替的方向和無限的線性迴圈迭代。

在起草工作時，我們需要使用特定於瀏覽器的字首，以確保可能的最佳瀏覽器支援。標準字首適用：

使用**商字首的animation屬性如下所示：

.element

與@keyframes一起：

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

@keyframes tutsfade

為了便於閱讀，在本教程中，我將繼續不使用字首，但最終版本將包括字首，並且我鼓勵您在css**中使用它們。

要查詢有關**商字首的更多資訊，可以檢視，這是**商字首資源的絕佳**。

您可以使用逗號分隔符新增多個動畫。假設我們要向tutsfade元素新增額外的旋轉，我們可以通過宣告額外的@keyframes然後將其繫結到我們的元素來實現：

.element 
@keyframes tutsfade 
}@keyframes tutsrotate 
}

讓我們進入並建立乙個簡單的形狀過渡；使用上述原理的正方形動畫。我們總共有五個階段，並且每個階段都將為我們的元素定義邊界半徑，旋轉度和不同的背景色。聊夠了，讓我們進入編碼。

首先，讓我們建立標記（要進行動畫處理的元素）。我們什至不去擔心類名，我們現在只使用普通的div：

然後，使用元素選擇器（div {}），向div新增預設樣式：

div

現在，讓我們準備@keyframes，我們將其稱為square-to-circle，以及五個階段

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

我們需要在這些階段中定義一些樣式，所以讓我們從為正方形的每個角指定border-radius開始：

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

}

另外，我們可以為每個階段宣告不同的background-color。

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

}

要真正實現這個主意，讓我們通過旋轉div並增加一點視覺效果來超越border-radius和background-color。

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

}

定義了正方形到圓形的動畫之後，我們需要將其應用於div：

div

在這裡，您會看到我們新增了乙個簡寫animation屬性，該屬性指出：

我們可以新增到animation屬性的最後乙個值是animation-timing-function。這將定義我們運動的速度，加速度和減速度。此功能可能是乙個非常詳細的值，手動計算很麻煩，但是有許多免費**為動畫計時功能提供資源和實時自定義。

css easing animation tool就是這樣一種工具，因此讓我們使用它來計算計時功能。

我想使用三次方貝塞爾函式向我們的square-to-circle動畫新增彈性效果。

操縱手柄並生成某種貝塞爾曲線後，請使用提供的**段更新動畫定時功能值。

div

最後的**，不使用**商字首（-webkit-，-moz-，-ms-，-o-）如下：

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

}

一切都可以在現代瀏覽器中很好地工作，但是firefox有乙個討厭的習慣，即渲染物件的效果很差。看看這些參差不齊的線條，看看我的意思是：

幸運的是，有乙個解決方法。在您的div中新增以下透明輪廓，firefox將完美呈現一切！

outline: 1px solid transparent;

而已！我們使用css動畫語法建立了乙個簡單的重複動畫。

有關瀏覽器對css動畫的支援的最新資訊，請檢視「我可以使用..」，但概括地說，支援的瀏覽器包括：firefox 5 +，ie 10 +，chrome，safari 4 +，opera 12+。

翻譯自:

css入門

css入門 CSS動畫入門

CSS布局入門 css

CSS布局入門 css

前端學習 Css3動畫入門

css入門 CSS動畫入門

CSS布局入門 css

CSS布局入門 css

前端學習 Css3動畫入門

相關推薦