CSS迭代間的關鍵幀動效延遲方法

沒有遇到過這樣的情況？你本來是想讓一個動效運行1秒，結果花了4秒，看起來似乎So easy！要真正做到，卻并不簡單，事實上這是可行的，我們模擬一個。

不在一個點上

它的動效延遲屬性（這兒我們用不到），會推遲動效的起始時間，一旦起步就會連續運行。

解決方案：不改變關鍵幀

你要在心里計算個數學問題：

我想讓動效運行1秒。

~加~

我想讓動效在迭代之間延遲4秒。

~等于~

5秒。

關鍵幀動效，計算的是運行的總時間：

關鍵幀再運行5秒：
為了使動效只運行1秒,你需要在總時間的1/5（或20%），即第一秒結束的時候變化代碼，敲出來應該是這樣的：

因為沒有假設值，你也可以用更少的代碼編寫，只要中間用逗號把關鍵步驟隔開就行：

用關鍵幀你可以做出你想象中的東西，只需記得，在插入關鍵幀的最后一步要100%設置的跟原圖案保持一致。

Demo：

HTML:

CSS:

智能社撰稿，轉載請注明來源！！

作為審稿的我，總覺得標題有點別扭。

天，我想向大家展示如何巧妙地使用HTML、CSS排序動畫和SVG濾鏡把生活中可能最可愛的東西之一——動物畫到網頁上。我們將探討繪制動物的兩種技術：一種使用純HTML和CSS，另一種使用內聯SVG背景圖像。

此演示高度實驗性質——動畫SVG濾鏡目前僅在Chrome中可用。

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

在尋找那些CSS3的效果庫嗎？如果你的答案是肯定的，并且目前沒有找到，那么你一定不能錯過小編為大家收集的這些CSS3效果庫，這是一個令你興奮的集合！最新的CSS3都配備了新的特性，來設計創建動畫和互動的網頁。在本文中，可以找到一些非常優秀的CSS3效果庫，來讓你的Web設計看起來更加引人注目。還在等什么？讓我們一起看起來吧！

Animate.css是一大堆的很酷，很有趣，而且很炫又能跨瀏覽器的動畫效果樣式集錦，你可以直接使用到項目中。

DynCSS將你的CSS解析成-dyn-(attribute)規則。這些規則是模擬瀏覽器事件(如滾動和縮放)的javascript表達式，其結果會應用到CSS屬性上。

Effeckt.css是一個集合了眾多新鮮而又實用的CSS/jQuery動畫效果，這些都適用于網站或是移動APP的網頁。比如一些AJAX彈出框動畫、菜單動畫、圖片標題展示等等。同時這些特效動畫還能進一步提升網站的用戶體驗，簡單而且實用。

Animatable用于創建CSS3動畫，其創建的動畫可以在任何平臺或設備（包括Android、BlackBerry、iOS 和WebOS等）中的現代瀏覽器上運行。即便不熟悉CSS，它也能幫助你創建多場景的CSS3動畫。

Hover是一套基于CSS3的鼠標懸停效果和動畫，這些效果和動畫可以非常輕松的被應用到按鈕、LOGO以及圖片等元素中。所有這些效果都是只需要單一的標簽，必要的時候使用before 和after偽元素。因為使用了CSS3 過渡、轉換和動畫效果，因此它只支持Chrome、Firefox 和Safari 等現代瀏覽器。

Bounce.js是一個用于制作漂亮CSS3關鍵幀動畫的JavaScript庫。只需添加一個組件，選擇預設，然后你就可以得到一個短網址或者導出為CSS代碼。

Magic Animations是CSS3動畫的包，伴有特殊的效果，用戶可以自由的在web 項目中使用。

Kitecss是一個靈活的CSS 助手庫，能幫助程序員實現各種頁面布局。

Buttons是一個簡單的框架，用來生成網頁上漂亮的按鈕。

Odometer是JavaScript、CSS庫，用來創建類似于"汽車行程里數顯示、航班信息板"的特效用戶界面。

Csshake是一個使用CSS3實現的動畫樣式，使用SASS編寫，利用它我們可以實現多種不同樣式的抖動效果（如下面的GIF圖像）。