摘要：示例或者簡(jiǎn)寫(xiě)上面的代碼將實(shí)現(xiàn)一個(gè)元素不透明度的過(guò)度，從到。接著，給添加默認(rèn)的樣式定義現(xiàn)在，我們來(lái)創(chuàng)建一個(gè)有五個(gè)階段的應(yīng)用動(dòng)畫(huà)定義完我們的動(dòng)畫(huà)，我們還需要將動(dòng)畫(huà)應(yīng)用到上現(xiàn)在動(dòng)畫(huà)的狀態(tài)是動(dòng)畫(huà)名稱(chēng)為。

現(xiàn)在越來(lái)越多的網(wǎng)站正在使用動(dòng)畫(huà)，無(wú)論是以GIF，SVG，WebGL，背景視頻等形式。 當(dāng)正確使用時(shí)，網(wǎng)絡(luò)上的動(dòng)畫(huà)帶來(lái)生機(jī)和交互性，為用戶(hù)增添了額外的反饋和體驗(yàn)。

在本教程中，我將向您介紹CSS動(dòng)畫(huà); 高性能的做事方式越來(lái)越受到browser support的歡迎。 下面的示例涵蓋了基礎(chǔ)知識(shí)：一個(gè)方形元素變化為圓形。

實(shí)現(xiàn)效果為https://codepen.io/mengmengpr...

高級(jí)選項(xiàng)

Envato市場(chǎng)上的設(shè)計(jì)師們一直在忙于創(chuàng)作一系列的CSS動(dòng)畫(huà)，從陰影到色帶，滑塊等。你可以將它們插入到你的網(wǎng)站中。
您還可以聘請(qǐng)Envato Studio的CSS專(zhuān)家，以幫助您為您的項(xiàng)目提供更豐富的定制。

CSS動(dòng)畫(huà)的主要組件是@keyframes，即創(chuàng)建動(dòng)畫(huà)的CSS規(guī)則。將@keyframes視為時(shí)間軸上的階段。 在@keyframes中，您可以定義這些階段，每個(gè)階段都有不同的樣式聲明。

接下來(lái)，要使CSS動(dòng)畫(huà)工作，您需要將@keyframes綁定到一個(gè)選擇器。這將逐步解析@keyframes聲明中的所有代碼，并根據(jù)階段將初始樣式更改為新樣式。

接下來(lái)我們將設(shè)置動(dòng)畫(huà)階段。@keyframes的屬性有：

我們選擇的名稱(chēng)（這里為tutsFade）。

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

css樣式：我們即將應(yīng)用到每個(gè)階段的樣式。

示例：

@keyframes tutsFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*---- 或者 ----*/
@keyframes tutsFade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/*---- 簡(jiǎn)寫(xiě) ----*/
@keyframes tutsFade {
    to {
        opacity: 0;
    }
}

上面的代碼將實(shí)現(xiàn)一個(gè)元素不透明度的過(guò)度，從opacity: 1到opacity: 0。上述每個(gè)方法都將獲得相同的結(jié)果。

動(dòng)畫(huà)屬性用于在CSS選擇器中調(diào)用@keyframes。
Animation可以有很多屬性：

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

animation-duration：動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)。

animation-timing-function：設(shè)置動(dòng)畫(huà)的速度（linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)。

animation-delay：動(dòng)畫(huà)開(kāi)始前的延遲。

animation-iteration-count：動(dòng)畫(huà)循環(huán)的次數(shù)。

animation-direction：定義是否應(yīng)該輪流反向播放動(dòng)畫(huà)。如果animation-direction值是"alternate"，則動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)正常播放，而在偶數(shù)次數(shù)反向播放。

animation-fill-mode：指定當(dāng)我們的動(dòng)畫(huà)完成時(shí)將哪些樣式應(yīng)用于元素。

示例：

.element {
    animation-name: tutsFade;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}
/*---- 簡(jiǎn)寫(xiě) ----*/
.element {
    animation: tutsFade 4s 1s infinite linear alternate;
}

我們需要使用瀏覽器特定的前綴來(lái)確保最佳的瀏覽器支持。 標(biāo)準(zhǔn)的前綴都有：

Chrome & Safari：-webkit-

Firefox：-moz-

Opera：-o-

IE：-ms-

上面的例子將變?yōu)椋?/p>

.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 */ }

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

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

您可以使用逗號(hào)分隔符添加多個(gè)動(dòng)畫(huà)。假設(shè)我們要添加一個(gè)旋轉(zhuǎn)到元素，需要聲明額外的@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);
    }
}

正方形到圓形的變換

接下來(lái)將創(chuàng)建一個(gè)簡(jiǎn)單的形狀轉(zhuǎn)換;使用上述原則來(lái)將一個(gè)正方形逐步變換為圓形。我們共有五個(gè)階段，在每個(gè)階段，都會(huì)定義元素的邊框半徑，旋轉(zhuǎn)和不同的背景顏色。

首先，我們創(chuàng)建一個(gè)html元素來(lái)進(jìn)行動(dòng)畫(huà)。

接著，給div添加默認(rèn)的樣式：

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

現(xiàn)在，我們來(lái)創(chuàng)建一個(gè)有五個(gè)階段的@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動(dòng)畫(huà)，我們還需要將動(dòng)畫(huà)應(yīng)用到div上:

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

現(xiàn)在動(dòng)畫(huà)的狀態(tài)是：

動(dòng)畫(huà)名稱(chēng)為square-to-circle。

動(dòng)畫(huà)時(shí)長(zhǎng)為2s。

動(dòng)畫(huà)延遲為1s。

動(dòng)畫(huà)循環(huán)次數(shù)為infinite，因此會(huì)無(wú)限循環(huán)。

動(dòng)畫(huà)循環(huán)方向?yàn)?b>alternate，它將從開(kāi)始到結(jié)束，然后反向執(zhí)行，然后再?gòu)拈_(kāi)始到結(jié)束，一直循環(huán)。

我們可以添加到動(dòng)畫(huà)屬性的最后一個(gè)值是動(dòng)畫(huà)定時(shí)功能。這將定義我們運(yùn)動(dòng)的速度，加速度和減速度。這個(gè)屬性可以是一個(gè)非常詳細(xì)的值（需要笨拙的手動(dòng)計(jì)算），但是有很多免費(fèi)的網(wǎng)站提供資源和動(dòng)態(tài)定時(shí)功能的實(shí)時(shí)定制。

一個(gè)相關(guān)的工具是CSS Easing Animation Tool，可以用來(lái)計(jì)算animation-timing-funtion。

通過(guò)在工具里的計(jì)算，使用animation-cubic-bezier，給我們的動(dòng)畫(huà)添加一個(gè)彈性特效。最終代碼如下：

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;
}

最后一步

在現(xiàn)代瀏覽器中，我們的動(dòng)畫(huà)都能完美運(yùn)行，但是Firefox在動(dòng)畫(huà)渲染方面較差，旋轉(zhuǎn)過(guò)程中邊緣會(huì)出現(xiàn)鋸齒。我們可以通過(guò)添加outline樣式完善：

outline: 1px solid transparent;

最近發(fā)現(xiàn)很多國(guó)外的優(yōu)質(zhì)文章，翻譯是自己學(xué)習(xí)的過(guò)程也是分享的過(guò)程。喜歡的話(huà)，點(diǎn)個(gè)贊吧。