【CSS3】CSS3動畫——我離前端的炫酷又近了一步

歸子莫發表於2021-12-26
CSSS3動畫前端

【CSS3】CSS3動畫——我離前端的炫酷又近了一步

部落格說明

文章所涉及的部分資料來自網際網路整理，當然還有自己個人的總結和看法，分享的目的在於共建社群和鞏固自己。引用的資料如有侵權，請聯絡本人刪除！幸好我在，感謝你來！

說明

CSS3 可實現 HTML 元素的動畫效果，而不使用 JavaScript 或 Flash。

為了學習前端的動效，我簡直是不折手段。目前就抓著CSS的動畫來搞一波。

什麼是動畫

⭕老規矩，問句開頭。

在需要變化的時間節點上指定一些關鍵幀，關鍵幀就是此刻所定義的樣式。例如我在1s左移5m，3s左一15m，這時就有兩個關鍵幀，因為這兩個關鍵幀，畫面就發生了位移，那麼動畫也就產生了。

下面這句話總結到位：動畫使元素逐漸從一種樣式變為另一種樣式。

CSS3的動畫主要依賴@keyframes和animation來實現。

@keyframes和animation的瀏覽器支援

image-20211124192418101

@keyframes 規則

@keyframes 規則是建立動畫。

@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

以上的就是一個簡單的動畫，關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。也就是從紅色變成黃色。

為了得到最佳的瀏覽器支援，使用 0% 和 100% 選擇器是最好的選擇。

animation

animation既然動畫的關鍵幀都有了，那麼就需要把這個關鍵幀落實並繫結到某個DOM上。

語法

可以一起寫，也可以分開寫屬性。

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

animation-name

指定要繫結到選擇器的關鍵幀的名稱

語法

animation-name: keyframename|none;
// keyframename 指定要繫結到選擇器的關鍵幀的名稱

animation-duration

動畫指定需要多少秒或毫秒完成

語法

animation-duration: time;
// time 指定動畫播放完成花費的時間。

animation-timing-function

指定動畫將如何完成一個週期

語法

animation-timing-function: value;

動畫函式

  • linear 動畫從頭到尾的速度是相同的。
  • ease 預設。動畫以低速開始，然後加快，在結束前變慢。
  • ease-in 動畫以低速開始
  • ease-out 動畫以低速結束。
  • ease-in-out 動畫以低速開始和結束。

  • steps(int,start|end）指定了時間函式中的間隔數量（步長）。

    有兩個引數，第一個引數指定函式的間隔數，該引數是一個正整數（大於 0）。

    第二個引數是可選的，表示動畫是從時間段的開頭連續還是末尾連續。

  • cubic-bezier(n,n,n,n) 貝塞爾曲線

    給一個貝塞爾曲線的的一個網站，你會感謝?我的哈！地址

animation-delay

定義動畫什麼時候開始，單位可以是秒（s）或毫秒（ms）

語法

animation-delay: time;
// time 定義動畫開始前等待的時間，以秒或毫秒計

animation-iteration-count

定義動畫應該播放多少次。

語法

animation-iteration-count: value;
//  n 定義應該播放多少次動畫
//     infinite 指定動畫應該播放無限次（永遠）

animation-direction

是否迴圈交替反向播放動畫。

這個是一個可玩性很高的一個屬性。

語法

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

引數解析

  • normal 預設值。動畫按正常播放。
  • reverse 動畫反向播放。
  • alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。
  • alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。
  • initial 繼承的屬性
  • inherit 繼承的屬性

animation-fill-mode

屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。

如果你需要考慮到動畫的狀態，可以使用這個屬性，比如保留動畫改變後的效果。

語法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

引數解析

  • none 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。
  • forwards 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。
  • backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。
  • both 動畫遵循 forwards 和 backwards 的規則。
  • initial 繼承的屬性
  • inherit 繼承的屬性

animation--play-state

指定動畫是否正在執行或已暫停。

語法

animation-play-state: paused|running;
// paused 指定暫停動畫
// running 指定正在執行的動畫

案例

顏色變換

div的顏色由紅色變為黃色

程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>動畫測試</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 6s;
}

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

效果

2021-12-26 19.07.42

順時鐘移動

將div順時針移動

程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>動畫測試</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
      position:relative;
    animation:myfirst 5s linear 2s;
}

@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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

效果

2021-12-26 19.03.06

總結

其實也看到這些基礎的動畫，其實實現起來並不複雜，那些複雜的動畫也都是通過這樣基礎的動畫構建的。但是是不是會有一個疑問，怎麼記得住這樣的屬性的使用呢？

這個問題和問PS的快捷鍵怎麼也記不住是一樣的，因為都沒有經常使用，怎麼記得住。等畫了上百個複雜動畫之後，相信就會對這個動畫有比較好的瞭解啦！

期待後續花樣的動畫案例吧！一切才剛剛開始！

感謝

萬能的網路

以及勤勞的自己，個人部落格，GitHub測試，GitHub

公眾號-歸子莫，小程式-小歸部落格

如果你感覺對你有幫助的話，不妨給我點贊?吧，持續關注也行哈！

相關文章