2. 程式人生 > >animation的steps()用法詳解

animation的steps()用法詳解

阿新 • • 發佈：2019-01-14

一.steps介紹

steps()是一個timing function（animation中），允許我們將動畫或者過渡分割成段，而不是從一種狀態持續到另一種狀態的過渡。

Steps(<number_of_steps>，<direction>)

兩個引數：第一個引數是一個正值，指定動畫分割的段數。第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。start 第一幀是動畫結束的時候狀態； end 第一幀是動畫開始的時候狀態

這面是示例圖：


二.列子

1.steps(4, end)與steps(4, start)的區別

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
 	<title>Steps() Demo - Car</title>
 	<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
 	<style>
 		body,html,div,p,span{margin: 0;padding: 0;}
 		.both-cars{
 			border-left: 6px solid #000;
		    border-right: 6px solid #000;
		    width: 720px;//4個車子的寬度
		    height: 300px;
		    margin: 20px auto;
 		}
 		.carbg{
 			width: 180px;
 			height: 160px;
 			position: relative;
 			animation: drive 4s steps(4, end) infinite;
  			-webkit-animation: drive 4s steps(4, end) infinite;
 		}
 		.carbg-2 {
		  	animation: drive 4s steps(4, start) infinite;
		  	-webkit-animation: drive 4s steps(4, start) infinite;
		}
 		.cartou{
		    position: absolute;
		    top: 35px;
		    left: 50%;
		    border-radius: 50%;
		    background: #ed6e46;
		    width: 100px;
		    height: 80px;
		    margin-left: -50px;
 		}
 		.cartou-bo{
 			position: absolute;
		    left: 15px;
		    top: 10px;
		    background: white;
		    border-radius: 100px 0 0 0;
		    width: 30px;
		    height: 30px;
 		}
 		.cartou-bo.right{
 			left: 56px;
    		transform: rotate(90deg);
 		}
 		.carbody{
			background:#ed6e46;
			border-radius: 100px 100px 10px 10px;
			width: 180px;
			height: 50px;
			position: absolute;
			bottom: 40px;
			left: 50%;
			text-align: center;
			color: #fff;;
			margin-left: -90px;
 		}
 		.rounds{
 			position: absolute;
 			bottom: 15px;
 			left:50%;
 			width: 140px;
 			margin-left: -70px;
 		}
		.round.right{
			float: right;
		}
 		.round{
 			width: 50px;
 			height:50px;
 			background:#333333;
 			border-radius: 50%;
 			display:inline-block;
 		}
 		.round:after{
 			content: '';
		    position: absolute;
		    left: 10px;
		    top: 10px;
		    background: gray;
		    border-radius: 50%;
		    width: 30px;
		    height: 30px;
 		}
 		.round>i{
 			position: absolute;
			left: 18px;
			top: 15px;
			width: 0;
			height: 0;
			border-left: 7px dotted transparent;
			border-right: 7px dotted transparent;
			border-bottom: 15px solid #333333;
			z-index: 20;
 		}
 		.round>i:after {
		    content: '';
		    position: absolute;
		    left: -7px;
		    top: 5px;
		    width: 0;
		    height: 0;
		    border-left: 7px dotted transparent;
		    border-right: 7px dotted transparent;
		    border-top: 15px solid #333333;
		}
		.round.right:after{left: 100px;}
		.round.right>i{left: 107px;}
		@keyframes drive {
		  to { transform: translateX(720px);}
		}
		@-webkit-keyframes drive {
		  to {-webkit-transform: translateX(720px);}
		}
 	</style>
</head>
<body>
	<div class="both-cars">
		<div class="carbg">
			<div class="cartou">
				<span class="cartou-bo"></span>
				<span class="cartou-bo right"></span>
			</div>
			<div class="carbody">(4,end)</div>
			<div class="rounds">
				<span class="round">
					<i></i>
				</span>
				<span class="round right">
					<i></i>
				</span>
			</div>
		</div>
		<div class="carbg carbg-2">
			<div class="cartou">
				<span class="cartou-bo"></span>
				<span class="cartou-bo right"></span>
			</div>
			<div class="carbody">(4,start)</div>
			<div class="rounds">
				<span class="round">
					<i></i>
				</span>
				<span class="round right">
					<i></i>
				</span>
			</div>
		</div>
	</div>
</body>
</html>

2.兔斯基賣萌：結合background-position

圖片有多長(x)，只要控制單個的大小，不要計算距離位置，直接最後background-position: 0 -y;然後直接百分之百到這個位置。分幾步就讓n等於多少。參考上邊的end時的用法或者預設狀態下的用法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兔斯基 賣萌</title>
<style type="text/css">
@-webkit-keyframes test {
  0% {background-position:0px 0;}
  100% {background-position:0px -400%;}
}
@keyframes test {
  0% {background-position:0px 0;}
  100% {background-position:0px -400%;}
}
.steps{
  height:35px;
  width:32px;
  text-indent: -9999px;
  -webkit-animation:test 4s steps(4,end) infinite;
  animation:test 4s steps(4,end) infinite;
  background:url(http://www.web-tinker.com/share/兔斯基揉臉.png);
}
</style>
</head>
<body>
	<div class="steps">兔斯基 賣萌</div>
</body>
</html>

steps(4,end)表示讓整個動畫在4個關鍵幀之間切換。這個兔斯基揉臉的圖片中包含了4幀，所以這裡設定了4。而且我們的動畫時長是4s，也就是說每一幀停留1s，這就和普通的GIF動圖達到了一樣的效果。

相關推薦

JavaScript中return的用法詳解

style 返回 www log tle blog 意思 charset fun 1、定義：return 從字面上的看就是返回，官方定義return語句將終止當前函數並返回當前函數的值，可以看下下面的示例代碼： <!DOCTYPE html><html l

SVN trunk(主線) branch(分支) tag(標記) 用法詳解和詳細操作步驟

trac load mar span 必須 最可 objc copy 右鍵 原文地址：http://blog.csdn.net/vbirdbest/article/details/51122637 使用場景： 假如你的項目（這裏指的是手機客戶端項目）的某個版本（例如1.0

js 定時器用法詳解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

ntb 幫助 .get tint num 用法 -c 函數 tel 在js應用中，定時器的作用就是可以設定當到達一個時間來執行一個函數，或者每隔幾秒重復執行某段函數。這裏面涉及到了三個函數方法：setInterval()、setTimeout()、clearI

selenium用法詳解

key url enc element api code 需要 int question selenium用法詳解 selenium主要是用來做自動化測試，支持多種瀏覽器，爬蟲中主要用來解決JavaScript渲染問題。 模擬瀏覽器進行網頁加載，當requests,url

C# ListView用法詳解

ont 結束 server 發生 匹配 鼠標 之前 小圖標 order 一、ListView類 1、常用的基本屬性： （1）FullRowSelect：設置是否行選擇模式。(默認為false) 提示：只有在Details視圖該屬性才有意義

linux cp命令參數及用法詳解---linux 復制文件命令cp

linux file linux cp命令參數及用法詳解---linux 復制文件命令cp [root@Linux ~]# cp [-adfilprsu] 來源檔(source) 目的檔(destination)[root@linux

Python數據類型方法簡介一————字符串的用法詳解

python 字符串連接 字符串用法 符串是Python中的重要的數據類型之一,並且字符串是不可修改的。 字符串就是引號(單、雙和三引號)之間的字符集合。（字符串必須在引號之內，引號必須成對）註：單、雙和三引號在使用上並無太大的區別； 引號之間可以采取交叉使用的方式避免過多轉義；

C# ListView用法詳解（轉）

分組 創建 cti 排列 checkbox 定義 com 程序 erl 一、ListView類 1、常用的基本屬性： （1）FullRowSelect：設置是否行選擇模式。(默認為false) 提示：只有在Details視圖該屬性才有

java中的instanceof用法詳解

定義 xtend print 繼承 interface 參數 保留 如果 ack 　　instanceof是Java的一個二元操作符（運算符）,也是Java的保留關鍵字。它的作用是判斷其左邊對象是否為其右邊類的實例，返回的是boolean類型的數據。用它來判斷某個對象是否是

@RequestMapping 用法詳解

同時 get() turn example track find 說明 tex -h 簡介： @RequestMapping RequestMapping是一個用來處理請求地址映射的註解，可用於類或方法上。用於類上，表示類中的所有響應請求的方法都是以該地址作為父路徑。

Css中路徑data:image/png;base64的用法詳解 (轉載)

javascrip base64編碼 asc cda 文件的 color 情況 ont 背景圖片 大家可能註意到了，網頁上有些圖片的src或css背景圖片的url後面跟了一大串字符，比如： background-image:url(data:image/png;bas

global用法詳解

global 在函數內傳遞參數1、global一般用在函數內，將外部變量參數傳遞至函數內部，用法為：<?php $name = "why"; function changeName(){ global $name; $name = "what";

java中靜態代碼塊的用法—— static用法詳解

super關鍵字 了解 裝載 static關鍵字 super 屬於 註意 lock 自動 （一）java 靜態代碼塊 靜態方法區別一般情況下,如果有些代碼必須在項目啟動的時候就執行的時候,需要使用靜態代碼塊,這種代碼是主動執行的;需要在項目啟動的時候就初始化,在不創建對象的

<!CDATA[]]用法詳解

引號 ica lap 用法 bsp mar ret message eight 所有 XML 文檔中的文本均會被解析器解析。 只有 CDATA 區段（CDATA section）中的文本會被解析器忽略。 PCDATA PCDATA 指的是被解析的字符數據（Parsed

Es6 Promise 用法詳解

set 問題 得到 math clas promise 回調 console spa Promise是什麽？？ 打印出來看看 console.dir(Promise) 這麽一看就明白了，Promise是一個構造函數，自己身上有all、reject、r

[轉] angular2-highcharts用法詳解

ppc tip option select sel nbsp 用法詳解 points ttr 1、 使用npm安裝angular2-highcharts npm install angular2-highcharts --save 2、主模塊中引入 app.module.t

常見<meta>的基本用法詳解

代碼 簡介 clas 元素 word spa wid min mpat <meta charset="utf-8"> 定義與name 屬性相關的信息，使用 utf-8編碼方式編譯字符 <meta http-equiv="X-UA-Compatible" c

oracle中的exists 和not exists 用法詳解

sdn ref 用法詳解 html nbsp e30 .net tail sin oracle中的exists 和not exists 用法詳解 http://blog.csdn.net/zhiweianran/article/details/7868894oracle

ng-options用法詳解

ota ack for in func mode [] 列表 checkbox nop ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替

boost::algorithm用法詳解之字符串關系判斷

ret 判斷 hello 第一個字符 pri 字符串替換 views .net private http://blog.csdn.net/qingzai_/article/details/44417937 下面先列舉幾個常用的： #define i_end_with boo