web前端：原生css球體彈跳效果，animation動畫

.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        position: absolute;
        width: 600px;
        height: 600px;
        background: url(../img/my-logo-2.png) repeat;
        background-size: 50px;
        border: 1px solid #000000;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px;
        
        &:hover #wrap-inner{
            //animation-play-state:動畫執行的運行/暫停，默認值running，pause暫停
            animation-play-state: paused;
        }
        
        #wrap-inner {
            position: absolute;
            width: 300px;
            height: 300px;
            background: tomato;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 2px 2px 5px tomato;
            font: 30px/300px "微軟雅黑";
            text-align: center;
            color: white;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            animation-name: rotated;
            animation-duration: 1.5s;
            //animation-timing-function: linear;
            animation-timing-function: cubic-bezier(.12,1.36,.65,-0.28);
            //direction:normal（from→to）reverse反轉（to→from）、alternate（from→to→from...循環）/alternate-reverse
            animation-direction: alternate;
            animation-iteration-count: 6;
            //延遲為外部動畫
            animation-delay: 1s;
            /*元素在動畫外的狀態: from之前to之后
              1. backwards與from一致=動畫開始的動作，結束回歸原位
              2. forwards與to一致=動畫結束的動作，結束不回歸原位
              3. both=動畫開始/結束的動作，開始/結束不回歸原位
            */
            //animation-fill-mode: backwards;
            //animation-fill-mode: forwards;
            animation-fill-mode: both;
        }
    }
    @keyframes rotated {
        from {
            //Y軸：x+100px
            transform: translateY(100px);
        }
        to {
            //Y軸：x-100px
            transform: translateY(-100px);
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 1px solid #000000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -300px;
}
* #wrap:hover #wrap-inner {
  animation-play-state: paused;
}
* #wrap #wrap-inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: tomato;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 2px 2px 5px tomato;
  font: 30px/300px "微軟雅黑";
  text-align: center;
  color: white;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  animation-name: rotated;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.12, 1.36, 0.65, -0.28);
  animation-direction: alternate;
  animation-iteration-count: 6;
  animation-delay: 1s;
  /*元素在動畫外的狀態: from之前to之后
              1. backwards與from一致=動畫開始的動作，結束回歸原位
              2. forwards與to一致=動畫結束的動作，結束不回歸原位
              3. both=動畫開始/結束的動作，開始/結束不回歸原位
            */
  animation-fill-mode: both;
}
@keyframes rotated {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(-100px);
  }
}

3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>動畫模式@keyframes{}</title>
	</head>
	<body>
		<div id="wrap">
			<div id="wrap-inner">cevent</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/less034.css" />
</html>

1234567891011121314

4.效果圖

是一個純CSS實現的Loading特效，由5個圓圈跳躍組成。這個特效使用了CSS的animation屬性，通過動態變化來實現圓圈的跳躍效果。同時，這個特效的實現沒有用到任何JavaScript，可以有效地提升網站的性能。

這個特效的設計非常巧妙，5個圓圈跳躍的交錯節奏感很強，能夠為用戶提供一個愉悅的等待體驗。整個特效的視覺效果非常出色，能夠為網站增添一些活力和趣味性。如果您正在尋找一個簡單而美觀的加載動畫，那么這個純CSS實現的排隊跳躍的Loading特效一定會是一個不錯的選擇。

希望這個特效能夠為您的網站增添一些活力和趣味性！

一、前言

css3的animation想必大家都知道吧，那 steps 逐幀動畫你知道嗎？對于我來說，實際工作及練習中也很少用到這種跳躍式變化的動畫，而它start和end的解釋又比較“不說人話”，以前用到steps動畫的時候，常常是靠調試，來回設置start和end，主打的就是瞎貓碰上死耗子。雖然之前也看過關于他們區別的文章，但都是半知半解，過兩天就剩零知零解了。最近忙里偷閑，我終于打算一探究竟了，我倒要看看start和end到底有什么區別！ 順便寫幾個小demo造福一方～

二、逐幀動畫介紹

animation的工作原理是通過將元素的CSS樣式從一個狀態改變為另一個狀態時（我們稱為線性變化），瀏覽器會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的，這也就是我們常用的 補間動畫。

而steps()逐幀動畫則是跳躍式變化，如果說補間動畫是一個滑坡式的變化，那么逐幀動畫就是階梯式變化，它的變化沒有中間過程。補間動畫就像你看的普通動畫片，而逐幀動畫就像是那種定格動畫。

語法:

  animation-timing-function: steps(number, [end | start])

參數說明：

number參數指定了時間函數中的間隔數量（必須是正整數）
第二個參數是可選的，可設值：start和end，表示在每個間隔的起點或是終點發生階躍變化，如果忽略，默認是end。

三、圖解圖解 step-start 和 step-end 區別

什么叫在間隔的起點或終點發生變化呢？光看文字十有八九看不懂，下面就用示例代碼來說明。

上圖是我ps的一張圖，尺寸為200*750，共5個色塊，每個色塊高度150。在示例代碼中我將以這張圖為背景，每一幀將背景上升一個色塊的高度。關鍵代碼如下：

animation: ani 5s 2s steps(5,start) infinite backwards;

@keyframes ani{
  100%{
    background-position:0px -750px;
  }
}

在設置動畫前的初始狀態：

再直接來看看動畫末態的情況：一個色塊150px，所以動畫末態是背景圖片向上移動750px。

為了完整的看到動畫效果，我設置了2秒的動畫延遲

我們設置的steps的第一個參數number為 5 ，也就是把整個動畫過程切割成5個片段，如下圖：

在實驗之前先來分析一下，既然是片段，那必然有片段的起點和終點，可以把補間動畫看作點，而逐幀動畫則是面。那么這五個片段的起點終點是哪呢，如下圖：

你會發現，動畫是由6個點切成段五段，帶著這個思路開始下面的實驗。

先來看一下設置 start 的效果:

你會發現色塊1怎么不顯示了，甚至在動畫沒開始前，也就是延時階段直接就顯示了【2】，變化過程為： 2 - 3 - 4 - 5 - 空
分析一下就可以想到，start是在間隔的起點發生階越變化，即開始直接就發生變化了，第一段直接階越到了第一段結束的位置。

再來看下設置 end 的效果：

你發現動畫變正常了，動畫過程是從【1】到【5】。再分析一下，因為end是在間隔終點發生階越變化，即每一段都會在其開始階段進行停留，這一段結束后才會發生變化直接階越到下一段的開始狀態。

總結：

可以將補間動畫和 steps 逐幀動畫類比于點和線的區別，steps切割開的每個動畫片段就是一條樣式不變的線，而線都有首尾兩個點。
設置 start 的 steps 的動畫總是在開始發生變化，即逐幀顯示每一段的終點；
而設置 end 的 steps 的動畫總是在結束發生變化，即逐幀顯示每一段的起點；

其實很簡單的道理，為什么總是記不住呢，因為他和人的慣性思維恰好相反。設置start總覺得是顯示每一段的開頭，可它恰好相反，start是開頭發生變化，顯示的都是每一段的結尾。

另一種理解思路：

steps(number, [end | start]) 是將動畫分為number段，共有number + 1幀畫面。start就是拋棄第一幀畫面執行動畫，end就是拋棄最后一幀畫面執行動畫。

注意： 第二個參數還有兩個內置值，step-start等同于steps(1,start)，動畫分成1步，2個節點，拋棄第一個節點，即顯示結尾節點的狀態；同理step-end等同于steps(1,end)。

jump-start：在每個時間間隔開始的時候跳1步到下一狀態位置； jump-end：在每個時間間隔結束的時候跳1步到下一狀態位置； jump-both：在每個時間間隔開始和結束的時候跳1步到下一狀態位置，跳步次數會比預設的多一次； jump-none：在每個狀態位置停留夠一個時間間隔才跳到下一位置，跳步次數會比與預設的少一次

四、思考

上面我只設置了動畫100%時的狀態，那如果我設置了多個關鍵幀的狀態呢，那還是以整個動畫過程切割成number段嗎？

我們再來做幾個實驗：

實驗1:

我們將動畫時間由5秒改成10秒（為了方便觀察，我們設置steps第二個參數為end，放棄第一幀畫面），然后將原先的動畫末態改到50%，并在動畫100%時增加邊框。·

animation: ani 10s 2s steps(5,end) infinite backwards;

@keyframes ani{
  50%{
    background-position:0px -750px;
  }
  100%{
    border: 100px solid red;
  }

結果如下圖：

觀察后發現，在10秒的完整動畫期間：background-position的變化過程是圖像顯示由1到5，再由5到1，共變化了 【10】 次，而我設置的steps的number參數是 【5】，這就打破了上面我說的以整個動畫過程切割成number段的假說。
同時可以觀察到，border的變化過程共進行了5次，因為我們只在100%的時候設置了border。

得出結論： steps的number參數并不是將整個動畫過程切割成number段，而是對于某個css樣式來說，每一段關鍵幀的變化切割成number段。

實驗2:

假想：上面我們只在動畫100%的時候設置了100px的boder，如果我們在50%的時候也設置border，并且狀態恰好是100%的一半，這樣對于動畫0%到100%是一個流暢的線性變化。請問這時候動畫還會被切成5段嗎？

觀察發現，動畫被切成了10段。

得出結論： 即使將幾個關鍵幀的css變化設置的具有規律性，但是steps仍然會將每段關鍵幀的變化切割成number段，即只要在這個關鍵幀里設置了某個css，那么對于這個css來說，這個關鍵幀就會被視為steps動畫的端點。

實驗3:

那既然每段關鍵幀都會被steps切割成number段，那每段的steps動畫執行的時間怎么劃分呢？其實想想就能想到，應該是按照關鍵幀占整個動畫過程的比例分割整個動畫時間。
如下圖設置boder：【0%-50%】寬度由0到100，【50%-75%】寬度由100到0，【75%-100%】寬度由0到100

很明顯可以觀察到，border寬度變化的時間為 2:1:1，即驗證了我上面的推論。

? 五、steps() 動畫實踐

下面我舉幾個steps() 動畫的使用場景。

1. 一張圖實現坤坤經典動作--鐵山靠

用一張人物動作關鍵幀的長圖，和上面的案例一樣，通過修改背景圖片位置，實現動物或人物的動作變化。作為一名蒸愛粉，我給哥哥做了一個跳舞的動畫：

2. 打字機效果--“只因你太美”

打字機的原理是用一個和文字總寬度一樣的div覆蓋文字，并用這個div的邊框設置steps()動畫實現光標效果，然后減小div寬度（每一幀減小一個文字的寬度），讓下面文字漏出來就好了～\

點擊運行查看效果～

3. 純css實現倒計時

我這里提供了兩種實現方案，準確來說是三種：

方案1: var() css變量 + counter-reset計數器 + @property規則 + steps()逐幀動畫
使用css變量和counter-reset計數器來實現倒計時的數字，只要設置動畫，在5秒內將變量由5變為0即可實現倒計時，但是變量的變化是不會被瀏覽器添加補間動畫的，即只會在5秒后直接變成0，而不會有中間，5-4-3-2-1-0的過程，這時我們再利用@property關鍵字為這個變量配置規則，實現數字變化的動態過程！
而最后出現的 "Go" 可以利用step-end逐幀動畫，在5秒后將文字修改成 "Go"，或者利用@counter-style關鍵字自定義計數器規則，在變量變化到0的時候，定義一個symbols符號。

如果你不了解counter-reset、@property和@counter-style，可以查看以下兩篇文章：
CSS counter-reset 屬性
mdn 關于@property API 說明 mdn 關于@counter-style 說明

點擊運行查看效果～

方案2: 只用steps()逐幀動畫
其實這個就很簡單了，所有的數字和最后的 "GO" 都在html里寫死并設置等高，然后就可以向上面移動圖片位置一樣移動這些數字進行顯示了。

點擊運行查看效果～

4. 其他應用場景

平常工作中可以用到steps()逐幀動畫的場景也有很多：

例如在延遲n秒后修改元素某個樣式，常規可能需要用js寫個延時器動態修改它的css，這完全可以用step-start動畫代替；
再比如除了上面那種大屏的倒計時，普通的時分秒倒計時也可以用steps代替js實現，實現原理也簡單，就是將 0-9 制作成一張精靈圖，然后時分秒每個單位都各自用這個精靈圖當作背景，例如對于秒的數字，可以設置動畫時長為10s，動畫函數為steps(10,start)，這樣每次數字變化都是 1s，同理對于分的數字，設置動畫時長為 600s,動畫函數為steps(10,start)，這樣每次數字變化都是 60s。

原文鏈接：https://juejin.cn/post/7242145254056214583

在線咨詢

上一篇：重蔚的php學習第二天之HTML篇
下一篇：你知道HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的嗎？

您的項目需求

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

整合營銷服務商

web前端：原生css球體彈跳效果，animation動畫

.less

2.css

3.html

4.效果圖

一、前言

二、逐幀動畫介紹

三、圖解圖解 step-start 和 step-end 區別

四、思考

實驗1:

實驗2:

實驗3:

? 五、steps() 動畫實踐

1. 一張圖實現坤坤經典動作--鐵山靠

2. 打字機效果--“只因你太美”

3. 純css實現倒計時

4. 其他應用場景

您的項目需求