css3怎么設置動畫

本篇內容主要講解“css3怎么設置動畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3怎么設置動畫”吧!

　　首先我們來了解一下css3實現簡單動畫需要用到的屬性：animation屬性，@keyframes“規則”。

　　animation屬性和@keyframes“規則”是css3新增的屬性，animation屬性可用來給動畫設置許多的CSS樣式，例如color，background-color，height，或width。

　　我們先通過@keyframes“規則”定義，再在animation屬性里調用，就可以實現一個簡單的動畫效果了。

　　如下所示：實現背景顏色的不斷切換

　　.element{

　　animation:pulse5sinfinite;

　　}

　　@keyframespulse{

　　0%{

　　background-color:#001F3F;

　　}

　　100%{

　　background-color:#FF4136;

　　}

　　}

　　運行后，背景顏色會不斷的進行變化，在#001F3F顏色值到#FF4136顏色值過渡變化，之間也會顯示一些過渡的背景色。大家可以自己動手試試效果。

　　每個@keyframes規則定義了在動畫期間中的特定時刻應該發生的事情。例如，0％是動畫的開頭，100％是結束。然后可以通過速記animation屬性或其八個子屬性來控制這些關鍵幀，以更好地控制應如何操縱這些關鍵幀。

　　下面我們來看看animation屬性的子屬性有哪些？有什么作用？

　　1、animation-name：聲明@keyframes要操作的at-rule的名稱。

　　2、animation-duration：動畫完成一個循環所需的時間長度。

　　3、animation-timing-function：建立預設的加速度曲線，如ease或linear。

　　4、animation-delay：正在加載的元素和動畫序列的開始之間的時間。

　　5、animation-direction：設置循環后動畫的方向。它的默認值在每個周期重置。

　　6、animation-iteration-count：動畫應執行的次數。

　　7、animation-fill-mode：設置在動畫之前/之后應用的值。

　　例如，我們可以將動畫的最后狀態設置為保留在屏幕上，也可以將其設置為在動畫開始之前切換回。

　　8、animation-play-state：暫停/播放動畫。

　　然后可以像這樣使用這些子屬性：

　　@keyframesstretch{

　　/*在這里聲明動畫的動作*/

　　}

　　.element{

　　animation-name:stretch;

　　animation-duration:1.5s;

　　animation-timing-function:ease-out;

　　animation-delay:0s;

　　animation-direction:alternate;

　　animation-iteration-count:infinite;

　　animation-fill-mode:none;

　　animation-play-state:running;

　　}

　　/*

　　相同：

　　*/

　　.element{

　　animation:

　　stretch

　　1.5s

　　ease-out

　　0s

　　alternate

　　infinite

　　none

　　running;

　　}

到此，相信大家對“css3怎么設置動畫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！