臥槽真是個神奇的ui boy。
於是我順著他的思路，用上了animation在timing-function中的steps屬性。
先來看看ui給的圖吧，是這樣的：（注：寬度1200px）
。x,y正數值越大，背景圖越向右下角偏移。
所以動畫的**如下：
但是這都不是我們需要的效果，因為幀動畫的關鍵在於「瞬變」。在animation的timing-function中，有乙個steps(n)屬性。表示將動畫分為n幀。比如說，這裡我們定義animation:spinning 2s steps(5) infinite。它在這個例子中表示的效果如下：
在0~400ms時，position：0 0；400ms~800ms,position：-240px 0。800ms~1200ms，position:-480px 0，以此類推。需要注意的是，比如400ms時position為0 0，在401ms時position就突變成-240px 0，即是說position是瞬變的。這個位置變化沒有過渡效果，這就是steps的特點：階躍性。
此時效果如下：
用 Animation 實現勻速旋轉
我知道問題就在動畫曲線上 只要把曲線弄成一條直線就行。但是當時折騰了一會兒也沒調出一條漂亮的直線，因此還是改用 來實現勻速旋轉。今天發現其實根本不用手調，只要右鍵單擊，把起始關鍵幀的 right tangent 和結尾關鍵幀的 left tangent 改為 linear 線性 就可以了 完美 其實...
VUE2 STEP1 用npm安裝環境
檢視版本 npm v 2.3.0 公升級 npm cnpm install npm g 公升級或安裝 cnpm npm install cnpm g 如果速度較慢,可以使用 映象 npm install g cnpm registry 安裝最新穩定版 npm install vue 命令列工具 vu...
animation的屬性值
animation在不需要觸發任何事件的情況下也可以隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果.實現動畫需要給其新增屬性值 1 animation name 動畫名稱 指定要繫結到選擇器的關鍵幀的名稱。必須與規則 keyframes 關鍵幀 配合使用，這個不用多說 name值自己設...