一文看懂CSS3動畫

文將使用CSS3動畫keyframes創建一個頁面加載器，加載時帶著三個黃色圓點破浪形移動。它將向您展示如何為加載頁面設計HTML樣式，創建動畫的keyframes，并使用keyframes的動畫延遲。

以下是你將在本教程結束時制作的內容。

圖中的三個黃色圓點，在頁面加載過程中，呈現波浪形的跳動。

首先，先創建一個基本的html文件：

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">

<span></span>

</div>

文中添加了一個名為loader類的div。這個div負責創建所有頁面加載器元素。在這個div中，添加了三個連續的span元素，每個元素表示一個頁面加載器圓點。

第二步為頁面定義基本的CSS：

/*_ OPTIONAL: Styles for the demo. *_/

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

這個代碼塊定義了p標記和主體的可選CSS樣式。背景顏色，字體大小等屬性可以根據自己的愛好更改。不過這些都不是動畫所必須的樣式，只是為了方便呈現動畫效果。

關鍵的定義是下面的.loader樣式：

/_ CSS for animated bouncing loader. _/

.loader {

display: flex;

justify-content: center;

align-items: center;

}

這里我們使用Flexbox，也就是display:flex; 它將彈跳的頁面加載器水平和垂直放置在頁面中間。

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

默認情況下，頁面加載器的形狀是方形的。我們要給它一個圓形形狀，可以將邊界半徑設置為50%。.loader > span:nth-child(n)是指loader父元素下的第n個子元素。animation-delay是動畫延遲時間。

這里最有趣的部分是animation屬性。我們使用了一個名為bouncingLoader的動畫keyframes，它每0.6s運行一次，并且無限重復。

定義動畫的keyframes。keyframes用于定義動畫行為，并讓我們完全控制CSS動畫的一個周期。我們將它定義為@keyframes，后面跟著動畫的名字，在本例中是bouncingLoader。

在@keyframe規則中，使用from和to兩個關鍵字來指定動畫的起始點和結束點。同樣地，你也可以用0%表示起點，用100%表示動畫的終點。

此外，如果您想要多個動畫轉換，您可以定義一個百分比范圍，每個百分比包含一個樣式選擇器列表。這些百分比可以以任何順序列出。這些百分比的簡單表示如下所示：

/_ Define the animation called bouncingLoader. _/

@keyframes bouncingLoader {

from {

width: 0.1rem;

height: 0.1rem;

opacity: 1;

transform: translate3d(0);

}

to {

width: 1rem;

height: 1rem;

opacity: 0.1;

transform: translate3d(0, -1rem, 0);

}

這使用了from和to關鍵字，它們定義了圓點的寬度、高度和不透明度等基本樣式屬性。Loader中每個圓圈的寬和高從0.1rem到width:1rem;和height:1rem; 除此之外，為了創建彈跳效果，使用CSS transform屬性更改給定元素的坐標，從而轉換每個圓點的位置。

使用這個transform屬性，采用了translate3D()函數，它接受三個輸入來解釋(x, y, z)坐標的變化。因為我們希望我們的裝載機在波動運動中運行，我們需要主要沿著y軸平移，保持x軸和z軸不變。因此，結束點的值為(0，-1rem, 0)。

最后一部分。既然已經為@keyframe編寫了代碼，現在就該設置并運行它了。動畫的運行是通過以下幾行代碼實現的（上面已顯示過一次）:

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

使用animation屬性和/或它的子屬性對想要動畫的元素進行樣式設置。使用此屬性可以控制動畫的時間、持續時間和其他細節。

這里你已經使用了以下動畫的子屬性:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

animation-name: 定義你的動畫的名字，在我的例子中是加載器。

animation-duration: 配置動畫完成一個循環的時間長度。

animation-iteration-count: 表示你希望動畫循環在停止前播放多少次。

animation-direction: 定義動畫播放的方向。

除了這些，還有其他幾個子屬性。你可以在Mozilla Web文檔中獲得詳細信息。

基于這些，本文的動畫定義如下:

animation: bouncingLoader 0.6s infinite alternate;

這行代碼做了以下三件事:

告訴loader元素使用keyframes bouncingLoader。

設置動畫的長度為0.6秒。

無限次地運行動畫。在完成一個循環后，動畫的方向就會發生變化，也就是反轉。

你已經為彈跳加載器的第一個圓點定義了這些屬性。為了瞄準第二個(2)和第三個(3)圓點，你使用了第n個子(n)選擇器，它允許你選擇和瞄準一個或多個元素，它們是父元素的第n個子元素。此外，對于其余的span元素，您剛剛定義了動畫延遲，因此每個元素不會同時開始動畫，而是延遲了定義時間后才開始，結果就是破浪形狀。

前，圖片產業可能是一個快速成長的行業。具有創造性的新網站如雨后春筍般，每天都會涌現出來，而 HTML 與 CSS 也存在于每一個控制指令中。

CSS 在電子結構化內容建設的道路上，還有很長的路要走。它被用以管控文件布局的絕對精準度，并以媒體類型來進行對比布局。當今的網站提供給了用戶多種類型的交互方式，而 CSS3 呈現的效果也被廣泛的應用在其中。

搜尋免費的代碼片段并不困難，但是需找遵循正確設計方向的設計視圖，卻很耗費時間。今天分享的這份清單將有助于你提升知識，同時也能提升用戶訪問網站的體驗度。

===============================

1.Modern Google Loader

2.CSS Rainbow Loader

3.Single element Slack loader

4.CSS Cog loader

5.VSCO – CSS loader

6.Cube CSS Loader

7.Pure CSS3 loader

8.CSS Loader

9.CSS3 Loaders

10.CSS loaders kit

11.Tumblr-style cog loaders

12.Logo Loader

13.CSS Water filling Loader

14.CSS loader

15.CSS Weather Loader

16.Chrome Cast CSS Loader

17.Simple Loader

18.Random Loader

19.CSS loader

20.Android 4.4 Kitkat loader

21.CSS creative loading

22.Simple CSS loader

23.CSS Loading Animation

24.Loaders collection by Loaders.css

25.Animated CSS3 Loading Bar

26.CSS Loading animation

27.Pushing pixels CSS loader

28.Page Loading Effects

29.CSS Loader

30.2D and 3D Block Loaders

31.CSS loading text animation

32.Single element CSS spinners

33.Pace.js – Page Load Progress Bars

34.SpinKit – CSS loaders

35.Loading SVG loaders

36.12 free SVG loaders

37.Material Design preloader

結論

如果你擁有自己的網站或博客，并希望找到一些好看的加載和預載設計的話，那么上面提到的免費 HTML5，CSS3 預載動畫將會以最有效的方式助你實現目標。

注：

由于頭條不支持站外鏈接跳轉，請手動復制地址：http://t.cn/RtbmtMg 在瀏覽器打開體驗。

英文原文：Free HTML5 And CSS3 Loaders and Preloaders
譯者：IT程序獅
譯文源自：http://t.cn/RtbmtMg
原創翻譯，版權歸原作者所有，轉載請標明出處，謝謝合作。

以往，想在HTML上實現動畫效果，要不就用被喬布斯恨死的了Flash 動畫，要不就用網頁動畫圖像或者JavaScript 實現效果。在CSS3之后，就可以用CSS在HTML上實現動畫了。

要創建 CSS3 動畫，你需要了解 @keyframes 規則?，F在 @keyframes 創建動畫時，需將其綁定到一個選擇器，否則動畫不會有任何效果。

13.1 原生創建動畫

用CSS3原生代碼創建動畫，語法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動畫的名稱；

keyframes-selector：必需，動畫時長的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個或多個合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動起來</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

輸出結果

13.2 動畫庫創建

如果每次都要自己手動用CSS去創建動畫，那效果太低了。為此，有人專門專門開發了CSS動畫庫animation.css?？梢栽诰€https://animate.stylek看效果，它里面的動畫效果，可以滿足大多數需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目錄下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用動畫庫實現動畫</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陳說編程，動畫效果行
</main>
</body>
</html>

輸出結果

好了，有關CSS動畫效果的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：實測，利用js工具wordexport將頁面導出為W
下一篇：nginx+php如何執行請求？工作原理介紹

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文看懂CSS3動畫

13.1 原生創建動畫

13.2 動畫庫創建

您的項目需求