CSS動畫之animations

時間 2019-12-09

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

原文原文鏈接

CSS Animations 是CSS的一個模塊，它定義瞭如何用關鍵幀來隨時間推移對CSS屬性的值進行動畫處理。關鍵幀動畫的行爲能夠經過指定它們的持續時間，它們的重複次數以及它們如何重複來控制。CSS動畫功能是很是強大的，而且效率也比較高，若是能用CSS解決的動畫那麼咱們最好不用JS動畫來完成。
CSS animations 使得能夠將從一個CSS樣式配置轉換到另外一個CSS樣式配置。動畫包括兩個部分:描述動畫的樣式規則和用於指定動畫開始、結束以及中間點樣式的關鍵幀。css

1. 配置動畫

建立動畫序列，須要使用animation屬性或其子屬性，該屬性容許配置動畫時間、時長以及其餘動畫細節，但該屬性不能配置動畫的實際表現，動畫的實際表現是由 @keyframes規則實現，animation的子屬性有：html

animation-delay
設置延時，即從元素加載完成以後到動畫序列開始執行的這段時間。默認爲0s,能夠爲負數，若是設定值爲-1s，動畫會從它的動畫序列的第1秒位置處當即開始。取值能夠爲ms/s

animation-direction
設置動畫在每次運行完後是反向運行仍是從新回到開始位置重複運行。瀏覽器

- normal    默認值，每一個動畫循環結束，動畫重置到起點從新開始
- alternate 動畫交替反向運行
- reverse 反向運行動畫，每週期結束動畫由尾到頭運行。
- alternate-reverse 反向交替， 反向開始交替

animation-duration
完成一次完整動畫須要的時間。默認值爲0s。取值能夠爲ms/s
animation-iteration-count
動畫須要迭代的次數。ide
- infinite 無限
- 數字
animation-name
指定keyframes定義的動畫幀，能夠爲多個值，不一樣值使用逗號分隔
animation-play-state
指定動畫是運行或者暫停。函數
- running
- paused
animation-timing-function
動畫運動函數

ease學習

liner動畫

ease-inspa

ease-outcode

ease-in-outorm

animation-fill-mode

animation-fill-mode它可以控制元素在動畫執行前與動畫完成後的樣式。一個帶有延遲(animation-delay)，而且按正常方向（animation-direction）執行的動畫（正常方向是指normal也就是指動畫從0%運行到100%的動畫）。動畫按執行時間來劃分，它分爲三個過程，或者說一次動畫過程能夠將元素劃分爲三個狀態：動畫等待、動畫進行和動畫結束。默認狀況之下，只有在動畫進行狀態，纔會應用@keyframes所聲明的動畫；而在動畫等待和動畫結束狀態，對元素樣式並不會產生任何的影響。

none 默認值，動畫執行先後不改變任何樣式
forwards 動畫結束後，元素的樣式將設置爲動畫的最後一幀的樣式
backwards 在動畫等待的那段時間內，元素的樣式將設置爲動畫第一幀的樣式
both 動畫將會執行 forwards 和 backwards 執行的動做

速寫 animation

.example { 
    animation: myAnim 2s 500ms 2 normal ease-in forwards; 
    }
擴展後
.example {
     animation-name: myAnim; 
     animation-duration: 2s; 
     animation-delay: 500ms; 
     animation-iteration-count: 2; 
     animation-direction: normal; 
     animation-timing-function: ease-in; 
     animation-fill-mode: forwards;
      }

2. 定義動畫幀

2.1 介紹

@keyframes 讓開發者經過指定動畫中特定時間點必須展示的關鍵幀樣式（或者說停留點）來控制CSS動畫的中間環節。這讓開發者可以控制動畫中的更多細節而不是所有讓瀏覽器自動處理。

要使用關鍵幀, 先建立一個帶名稱的@keyframes規則，以便後續使用 animation-name 這個屬性來調用指定的@keyframes. 每一個@keyframes 規則包含多個關鍵幀，也就是一段樣式塊語句，每一個關鍵幀有一個百分比值做爲名稱，表明在動畫進行中，在哪一個階段觸發這個幀所包含的樣式。

爲了讓一個關鍵幀列表有效，它必須至少包含了對0%（或from）和100%（或to）即動畫的開頭幀和結束幀的定義。若是都沒有進行定義，那麼整個@keyframes 是無效的，不能使用。

2.2 語法

@keyframes <identifier> {
[ [ from | to | <百分比> ] [, from | to | <百分比> ] block ]
}

<identifier>
幀列表的名稱。名稱必須符合 CSS 語法中對標識符的定義。
from
等效於 0%.
to
等效於 100%.
<percentage>
動畫序列中，觸發關鍵幀的時間點，使用百分值來表示。

2.3 animate.css庫的調用

學習完動畫語法後，可能有些同窗比較疑惑，我如何寫出漂亮的動畫呢，其實這個我以爲和技術關係不是很大了，更多的是用戶體驗和美學。因此專業的事情應該由更專業的人來完成。在開源社區有一個animate.css的庫。咱們能夠直接調用。若是想讓某個元素實現動畫特效，只須要添加一個樣式便可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <title>動畫</title>
</head>
<body>
    <div class="animated bounce">hello</div>
</body>
</html>

相關標籤/搜索

每日一句

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