摘要：示例或者簡寫上面的代碼將實現一個元素不透明度的過度，從到。接著，給添加默認的樣式定義現在，我們來創建一個有五個階段的應用動畫定義完我們的動畫，我們還需要將動畫應用到上現在動畫的狀態是動畫名稱為。

現在越來越多的網站正在使用動畫，無論是以GIF，SVG，WebGL，背景視頻等形式。 當正確使用時，網絡上的動畫帶來生機和交互性，為用戶增添了額外的反饋和體驗。

在本教程中，我將向您介紹CSS動畫; 高性能的做事方式越來越受到browser support的歡迎。 下面的示例涵蓋了基礎知識：一個方形元素變化為圓形。

實現效果為https://codepen.io/mengmengpr...

高級選項

Envato市場上的設計師們一直在忙于創作一系列的CSS動畫，從陰影到色帶，滑塊等。你可以將它們插入到你的網站中。
您還可以聘請Envato Studio的CSS專家，以幫助您為您的項目提供更豐富的定制。

CSS動畫的主要組件是@keyframes，即創建動畫的CSS規則。將@keyframes視為時間軸上的階段。 在@keyframes中，您可以定義這些階段，每個階段都有不同的樣式聲明。

接下來，要使CSS動畫工作，您需要將@keyframes綁定到一個選擇器。這將逐步解析@keyframes聲明中的所有代碼，并根據階段將初始樣式更改為新樣式。

接下來我們將設置動畫階段。@keyframes的屬性有：

我們選擇的名稱（這里為tutsFade）。

階段：0%-100%或者from(0%)-to(100%)。

css樣式：我們即將應用到每個階段的樣式。

示例：

@keyframes tutsFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*---- 或者 ----*/
@keyframes tutsFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/*---- 簡寫 ----*/
@keyframes tutsFade {
    to {
        opacity: 0;
    }
}

上面的代碼將實現一個元素不透明度的過度，從opacity: 1到opacity: 0。上述每個方法都將獲得相同的結果。

動畫屬性用于在CSS選擇器中調用@keyframes。
Animation可以有很多屬性：

animation-name：@keyframes的名字（這里是tutsFade)。

animation-duration：動畫持續時長。

animation-timing-function：設置動畫的速度（linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)。

animation-delay：動畫開始前的延遲。

animation-iteration-count：動畫循環的次數。

animation-direction：定義是否應該輪流反向播放動畫。如果animation-direction值是"alternate"，則動畫會在奇數次數正常播放，而在偶數次數反向播放。

animation-fill-mode：指定當我們的動畫完成時將哪些樣式應用于元素。

示例：

.element {
    animation-name: tutsFade;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}
/*---- 簡寫 ----*/
.element {
    animation: tutsFade 4s 1s infinite linear alternate;
}

我們需要使用瀏覽器特定的前綴來確保最佳的瀏覽器支持。 標準的前綴都有：

Chrome & Safari：-webkit-

Firefox：-moz-

Opera：-o-

IE：-ms-

上面的例子將變為：

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

為了本教程的可讀性，接下來將不使用前綴，但最終版本會包含它們，我也鼓勵您能在您的CSS代碼中使用前綴。

要了解更多有關瀏覽器前綴的信息，可以查看http://css3please.com/。

您可以使用逗號分隔符添加多個動畫。假設我們要添加一個旋轉到元素，需要聲明額外的@keyframes，然后綁定到我們的元素：

.element {
    animation: tutsFade 4s 1s infinite linear alternate,
    tutsRotate 4s 1s infinite linear alternate;
}

@keyframes tutsFade {
    to {
        opacity: 0;
    }
}
@keyframes tutsRotate {
    to {
        transform: rotate(180deg);
    }
}

正方形到圓形的變換

接下來將創建一個簡單的形狀轉換;使用上述原則來將一個正方形逐步變換為圓形。我們共有五個階段，在每個階段，都會定義元素的邊框半徑，旋轉和不同的背景顏色。

首先，我們創建一個html元素來進行動畫。

接著，給div添加默認的樣式：

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
}

現在，我們來創建一個有五個階段的@keyframes：

@keyframes square-to-circle {
    0%{
        border-radius: 0 0 0 0;
        background: coral;
        transform: rotate(0deg);
    }
    25%{
        border-radius: 50% 0 0 0;
        background: darksalmon;
        transform: rotate(45deg);
    }
    50%{
        border-radius: 50% 50% 0 0;
        background: indianred;
        transform: rotate(90deg);
    }
    75%{
        border-radius: 50% 50% 50% 0;
        background: lightcoral;
        transform: rotate(135deg);
    }
    100%{
        border-radius: 50%;
        background: darksalmon;
        transform: rotate(180deg);
    }
}

定義完我們的square-to-circle動畫，我們還需要將動畫應用到div上:

div {
    width: 200px;
    height: 200px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite alternate;
}

現在動畫的狀態是：

動畫名稱為square-to-circle。

動畫時長為2s。

動畫延遲為1s。

動畫循環次數為infinite，因此會無限循環。

動畫循環方向為alternate，它將從開始到結束，然后反向執行，然后再從開始到結束，一直循環。

我們可以添加到動畫屬性的最后一個值是動畫定時功能。這將定義我們運動的速度，加速度和減速度。這個屬性可以是一個非常詳細的值（需要笨拙的手動計算），但是有很多免費的網站提供資源和動態定時功能的實時定制。

一個相關的工具是CSS Easing Animation Tool，可以用來計算animation-timing-funtion。

通過在工具里的計算，使用animation-cubic-bezier，給我們的動畫添加一個彈性特效。最終代碼如下：

div {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: coral;
    animation: square-to-circle 2s 1s infinite cubic-bezier(1, .015, .295, 1.225) alternate;
}

最后一步

在現代瀏覽器中，我們的動畫都能完美運行，但是Firefox在動畫渲染方面較差，旋轉過程中邊緣會出現鋸齒。我們可以通過添加outline樣式完善：

outline: 1px solid transparent;

最近發現很多國外的優質文章，翻譯是自己學習的過程也是分享的過程。喜歡的話，點個贊吧。