CSS3 動畫解析

一.Animation 動畫

1. 含義

CSS3 的 animation 是經過關鍵幀的形式作出來的。使用時常結合 transform 屬性進行製做。

2.animation 語法

animation 屬性是一個簡寫屬性，用於設置下方六個動畫屬性；

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

值	描述
name	須要綁定到選擇器 keyframes 的名稱
duration	規定須要完成動畫的時間
timing-function	規定動畫的速度曲線
delay	規定動畫開始前的延遲時間
iteration-count	規定動畫應該執行的次數
direction	規定是否輪流方向播放動畫
fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
play-state	指定動畫是否正在運行或已暫停

接下來將分析每一個屬性的取值：

1. timing-function 屬性

值	描述
linear	動畫從頭至尾的速度是一致的
ease	默認，開始時慢，慢慢加速，結束前減速
ease-in	低速開始
ease-out	低速結束
ease-in-out	低速開始結束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

2.iteration-count

值	描述
<number>	動畫播放次數爲 n,能夠爲小數
infinite	動畫播放循環

3.direction

值	描述
normal	默認，動畫正常播放
alternate	動畫在奇數次（一、三、5...）正向播放，在偶數次（二、四、6...）反向播放。
reverse	反向播放
alternate-reverse	動畫在奇數次（一、三、5...）反向播放，在偶數次（二、四、6...）正向播放。

4.fill-mode

值	描述
none	默認值，動畫在動畫執行以前和以後都不會運用任何樣式到目標元素上
forwards	目標保持動畫最後一幀的樣式，最後一幀是哪一個取決於animation-direction和 animation-iteration-count
backwards	動畫採用相應第一幀的樣式，保持 animation-delay
both	動畫將會執行 forwards 和 backwards 執行的動做

5.play-state

值	描述
running	當前動畫正在運行
paused	當前動畫已被中止

3.補充 transform 的屬性

具體屬性能夠參考 www.w3school.com.cn/cssref/pr_t…

4.實戰

該實例實現繞圈動畫

• html 代碼

<div class="mainBox">
    <div class="sun">
        <img src="../image/1.jpg">
    </div>
    <div class="earth">
        <img src="../image/1.jpg">
    </div>
</div>
複製代碼

• CSS 代碼

.mainBox {
    position: relative;
    width: 600px;
    height: 600px;
}

.sun {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 250px;
}

.mainBox img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.earth {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 250px;
    left: 450px;
    transform-origin: -150px 50px;
    animation: rotate 5s linear forwards;
}

@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}
複製代碼

• 效果

結合 clip-path 作動畫

介紹clip-path 是用來裁剪的，如對一個 div 應用 clip-path:circle(40% at 50% 50%),意爲裁剪一個半徑爲 40%，圓心在(50%，50%) 位置的一個圓；使用 clip-circle 可用來作一些形狀變化的動畫

clip-path 實戰

• html 代碼

<div class="imgBox">
    <img src="../image/1.jpg">
</div>
複製代碼

• CSS 代碼

.imgBox img {
    clip-path: circle(10% at 50% 50%);
    transition: clip-path 8s ease-in-out;
}

.imgBox img:hover {
    clip-path: circle(40% at 50% 50%)
}
複製代碼

• 效果

效果本文參考李銀城的書籍《高效前端》歡迎你們留言探討~