animation階躍函式step詳解
首先，我們用CSS3的animation完成一個進度條動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} .div-1{width: 200px; height: 20px; background-color: gray; position: relative;} .div-1::after{content: ''; background-color: red; height: 20px; position: absolute; top: 0; left: 0; animation: progress 10s ease 0s both;} @keyframes progress{ 0% {padding-right: 0%;} 20% {padding-right: 50%;} 40% {padding-right: 70%;} 60% {padding-right: 85%;} 80% {padding-right: 95%;} 100% {padding-right: 100%;} } </style> </head> <body> <div class="div-1"></div> </body> </html>
這裡，是使用::after偽類動態建立進度條紅色區域，並通過animation改變padding-right值來實現其效果，在animation中，ease表示動畫從低速開始，然後加快，最後變慢的速度曲線，除了ease，還有諸如linear、ease-in、ease-out、ease-in-out和貝塞爾曲線等等，它們所表示的是在整個完整動畫中的每兩個相鄰的關鍵幀之間的速度變化狀態，在上面的例子中，則是0%-20%之間，20%-40%之間等等，並不要理解成整個動畫的狀態，當然，如果你定義的是0%-100%（或者from-to）則可以理解成表示整個動畫過程，整個速度曲線是平滑過渡的，視覺上十分流暢
在animation-timing-function中，有個比較特殊的屬性，steps，它表示一個階躍函式，可以為step-start、step-end、steps(1, end)三種方式
其中，step-start等同於steps(1, start)，step-end等同於steps(1, end)，steps([num], [type])第一個引數表示階躍的次數（動畫分幾步完成），第二個引數有start和end兩個值，start表示動畫從一開始就跳到100%直到週期結束，end表示保持0%狀態直到週期結束
注意，這裡的階躍次數指的是每兩個關鍵幀之間的次數，比如0%-20%之間，20%-40%之間等等，不是整個動畫狀態
上述例子中，把ease改為steps(2, end)可以發現，動畫在0%-20%的動畫週期中，分割成了兩次跳躍，比如這裡的20%結束狀態是padding-right:50%，則第一次跳躍為padding-right:25%，這裡的跳躍是沒有任何過渡效果的，直接顯示改變後的狀態，因此，也叫作階躍函式
主要可以運用在一些sprits動畫中，通過階躍函式改變其background-position值，實現連貫的動畫效果
相關推薦
animation階躍函式step詳解
首先，我們用CSS3的animation完成一個進度條動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></
深入理解CSS3 Animation 幀動畫(step詳解)
CSS3我在5年之前就有用了，包括公司專案都一直在很前沿的技術。 最近在寫慕課網的七夕主題，用了大量的CSS3動畫，但是真的沉澱下來仔細的去深入CSS3動畫的各個屬性發現還是很深的，這裡就寫下關於幀動畫steps屬性的理解 我們知道CSS3的Animation有八個屬性 animation-nameanim
Vue 進階教程之：詳解 v-model
com 方式 事件 變化 復習 簡寫 mage fine 需要 分享 Vue 官網教程上關於 v-model 的講解不是十分的詳細，寫這篇文章的目的就是詳細的剖析一下， 並介紹 Vue 2.2 v-model改進的地方，然後穿插的再說點 Vue 的小知識。 在 Vue 中，
animation-timing-function的steps詳解
span 動畫 info str 小鳥 slow OS pre mage W3C裏的定義： animation-timing-function 規定動畫的速度曲線。 這個屬性有很多取值， linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
python3開發進階-Django框架的詳解
本質 負責 log 生命周期 target 了解 定制 基本 del 一、MVC框架和MTV框架 MVC，全名是Model View Controller，是軟件工程中的一種軟件架構模式，把軟件系統分為三個基本部分： 模型(Model)、視圖(View)和控制器(Con
C++多型呼叫實現原理（虛擬函式表詳解)
1.帶有虛擬函式的基類物件模型 我們先看段程式碼： #include<iostream> using namespace std; class B1 { public: void func1() {} int _b; }; class B2 { pub
WordPress函式wp_page_menu詳解
說明 該標籤顯示帶有連結的WordPress頁面列表，並且可以選擇將 Home（主頁）自動顯示為列表中的一員。該標籤是自定義側邊欄和標題欄的好幫手，同時還可以用在其它模板中。 WordPress教程 用法 <?php wp_page_menu( $args&n
ROW_NUMBER() OVER()函式用法詳解 （分組排序 例子多）
語法格式：row_number() over(partition by 分組列 order by 排序列 desc) row_number() over()分組排序功能： 在使用 row_number() over()函式時候，over()裡頭的分組以及排序的執行晚於 wher
matlab對影象操作函式的詳解（筆記1）
matlab對影象操作函式的詳解 一. 讀寫影象檔案 1. imread imread函式用於讀入各種影象檔案，如：a=imread('e:\w01.tif') 注：計算機E盤上要有w01相應的.tif檔案。 2. imwrite imwrite函式用於寫入影象檔案，如：im
JavaScript中立即執行函式例項詳解 轉載 作者：李牧羊
javascript和其他程式語言相比比較隨意，所以javascript程式碼中充滿各種奇葩的寫法，有時霧裡看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關於JavaScript中立即執行函式的相關資料，需要的朋友可以參考下。 前言
安卓自定義View進階-多點觸控詳解
Android 多點觸控詳解，在前面的幾篇文章中我們大致瞭解了 Android 中的事件處理流程和一些簡單的處理方案，本次帶大家瞭解 Android 多點觸控相關的一些知識。 多點觸控 ( Multitouch，也稱 Multi-touch )，即同時接受螢幕上多個點的人機互動
安卓自定義View進階-事件分發機制詳解
Android 事件分發機制詳解，在上一篇文章 事件分發機制原理 中簡要分析了一下事件分發機制的原理，原理是十分簡單的，一句話就能總結：責任鏈模式，事件層層傳遞，直到被消費。 雖然原理簡單，但是隨著 Android 不斷的發展，實際運用場景也越來越複雜，所以想要徹底玩轉事件分發機制還
linux之select函式用法詳解
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
regionprops函式用法詳解
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
【備戰春招/秋招系列】美團Java面經總結進階篇 （附詳解答案）
一 訊息佇列MQ的套路 1.1 介紹一下訊息佇列MQ的應用場景/使用訊息佇列的好處 ①.通過非同步處理提高系統性能 ②.降低系統耦合性 1.2 那麼使用訊息佇列會帶來什麼問題？考慮過這個問題嗎？ 1.3 介紹
opencv2庫基礎函式的詳解
今天我們來學習一個最簡單的程式，即從檔案讀取影象並且建立視窗顯示該影象。 目錄 【imread】影象讀取 【namedWindow】建立window視窗 【imshow】影象顯示 【imwrite】影象寫入檔案 【waitKey
python內建函式 sorted詳解
sorted作為python的內建全域性方法，用於可迭代序列的排序。 sorted函式接受3個引數： sorted(iterable,key,reverse)sorted函式有以下特點：1）對列表排序，返回的物件不會改變原列表 >>> list =[1,2,3,
C++中，getline函式的詳解
C++中本質上有兩種getline函式，一種在標頭檔案<istream>中，是istream類的成員函式。一種在標頭檔案<string>中，是普通函式。 在<istream>中的getline函式有兩種過載形式： istream&am
js變數提升、函式提升詳解
一、變數提升是指將變數宣告提升到它所在作用域的最開始部分 console.log(a) // undefined var a = 1; console.log(a) // 1 為什麼會出現以上的結果，是因為js的變數提升，將a變數的宣告提升到全域性作用域的最上面部分，實際程式碼如下：
moveWindow函式用法詳解
moveWindow()函式用於改變視窗的位置和尺寸 格式如下： BOOL moveWindow( const string& winname,int x, int y, int Width, int Height,BOOL bRepaint = TRUE); 引數說明：