A Beginner’s Introduction to CSS Animation中文版

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

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

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

高級選項

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

@keyframes 和 Animation

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

接下來，要使CSS動畫工做，您須要將@keyframes綁定到一個選擇器。這將逐步解析@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。上述每一個方法都將得到相同的結果。

@Animation

動畫屬性用於在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>

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

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

定義Keyframes

如今，咱們來建立一個有五個階段的@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，它將從開始到結束，而後反向執行，而後再從開始到結束，一直循環。

使用animation-timing-function

咱們能夠添加到動畫屬性的最後一個值是動畫定時功能。這將定義咱們運動的速度，加速度和減速度。這個屬性能夠是一個很是詳細的值（須要笨拙的手動計算），可是有不少免費的網站提供資源和動態定時功能的實時定製。

一個相關的工具是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;

最近發現不少國外的優質文章，翻譯是本身學習的過程也是分享的過程。喜歡的話，點個贊吧。