CSS3 動畫

時間 2019-11-08

標籤 css3 css 動畫欄目 CSS 简体版

原文原文鏈接

概覽

經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。css

因爲是CSS3 嘛，因此部分舊版本瀏覽器固然沒法完美呈現，節哀。html

小試牛刀

學習任何東西都須要有必定的成就感纔會有繼續學習的動力，先別管那麼多，先讓咱們的動畫動起來。css3

<!DOCTYPE html>
<html>
<head>
<style>
    @keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Firefox */
    @-moz-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Safari and Chrome */
    @-webkit-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Opera */
    @-o-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }

    div {
        width:100px;
        height:100px;
        margin: 50px auto;
        background:red;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

是否是很簡單，很炫酷呀？web

實現CSS3 動畫須要至少如下幾個條件：瀏覽器

使用 @keyframes 建立動畫並命名函數
使用 animation簡寫屬性或其餘具體屬性調用動畫並設置動畫時長工具
將 animation 綁定到某個選擇器上學習

下面具體介紹各相關屬性吧。動畫

建立動畫 `@keyframes`

經過 @keyframes 規則，您可以建立動畫。spa

建立動畫的原理是將一套 CSS 樣式逐漸變化爲另外一套樣式。

在動畫過程當中，您可以屢次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者經過關鍵詞 from 和 to來規定改變發生的時間。

0% 是動畫的開始時間，100% 動畫的結束時間。

爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

@keyframes myfirst {
    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;}
}
/* Firefox */
@-moz-keyframes myfirst {
    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;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
    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;}
}
/* Opera */
@-o-keyframes myfirst {
    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;}
}

調用動畫 `animation`

上面咱們使用 @keyframes 建立了動畫，接下來咱們來調用動畫。

上面也說了，調用動畫最基本的是動畫名稱和動畫花費的時間，下面將具體介紹動畫調用的相關屬性。

`animation-name`

指定要調用的動畫。

animation-name: keyframename | none;

none 規定無動畫效果（可用於覆蓋來自級聯的動畫）。

keyframename 命名遵循以下規則：

名字能夠是字母，數字，_ 或 -,區分大小寫，只能以字母或單-開頭，不能使用none,unset,initial,inherit關鍵字。

`animation-duration`

animation-duration 屬性定義動畫完成一個週期所須要的時間，以秒或毫秒計。

animation-duration: 2s; /*等價於 2000ms*/

`animation-timing-function`

animation-timing-function 規定動畫的速度曲線。

animation-timing-function: value;

此屬性值使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數來生成速度曲線。

有以下值可選：

值	描述
`linear`	動畫從頭至尾的速度是相同的。
`ease`	默認。動畫以低速開始，而後加快，在結束前變慢。
`ease-in`	動畫以低速開始。
`ease-out`	動畫以低速結束。
`ease-in-out`	動畫以低速開始和結束。
`cubic-bezier(n, n, n, n)`	在 `cubic-bezier` 函數中本身的值。可能的值是從 0 到 1 的數值。

5 個預約義關鍵字對應的貝塞爾函數爲：

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

簡單體會一下 5 種速度曲線的效果：

想親自去體驗各類值對速度的影響，請移步這裏：貝塞爾速度曲線

`animation-delay`

animation-delay 屬性定義動畫什麼時候開始。

animation-delay: time;

值以秒或毫秒計。容許負值，-2s 使動畫立刻開始，但跳過 2 秒進入動畫。

`animation-iteration-count`

animation-iteration-count 屬性定義動畫的播放次數。

animation-iteration-count: n | infinite;

n 表示具體的次數，默認爲1，infinite 規定無限次播放。

`animation-direction`

animation-direction 屬性定義是否應該輪流反向播放動畫。

animation-direction: normal | reverse | alternate | alternate-reverse;

兩個關鍵字可選，normal 表示動畫正常播放，默認值，從 0% -> 100% 再從 0% -> 100%. reverse 與 normal 相反，從 100% -> 0% 再從 100% -> 0%. alternate 表示輪流反向播放，從 0% -> 100% 再從 100% -> 0% 再從 0% -> 100%. alternate-reverse 與 alternate 相反。

`animation-fill-mode`

通俗的講就是動畫結束以後保持什麼狀態。

有四個值可選，而且容許由逗號分隔多個值。

none 表示不設置結束以後的狀態，默認狀況下回到跟初始狀態同樣。
forwards 當動畫完成後，保持整個動畫結束時的狀態。
backwards 明確設置動畫結束以後回到初始狀態。
both 表示設置爲結束或者開始時候的狀態。通常都是回到默認狀態。

逗號分隔的多個值用來分別設置多個動畫。

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

`animation-play-state`

animation-play-state 屬性規定動畫正在運行仍是暫停。

animation-play-state: paused | running;

paused 表示動畫正在暫停，動畫不會動。running 表示動畫正在動，默認。

`animation`

此屬性爲上述七個具體屬性的簡寫屬性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

小結

對CSS3 動畫先簡單瞭解這麼多，後續可能有新內容再補充。

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

CSS3 動畫

概覽

小試牛刀

建立動畫 @keyframes

調用動畫 animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

animation

小結