推特最近更新了他們的點贊按鈕，使用了全新的動畫，而這個動畫使用一組動畫來實現(xiàn)的而不是依賴于CSS 的transitions。今天使用CSS動畫的steps方法來重建這個動畫。

錯覺

這種效果跟西洋鏡的原理差不多，都是呈現(xiàn)一系列的幀，形成動畫的效果

Demo

鼠標移到星星上面觸發(fā)動畫：

在這個例子中，我們開始創(chuàng)建一些列動畫中會用到的圖片，我們就直接使用Twitter的圖標了。

為了驅動這些圖片幀，我們需要把他們放在同一水平線，這樣我們只需要移動背景圖的位置就行了。

Step() 方法

對于大多數(shù)timing function而言(比如cubic-bezier)，過度的開始和結束都會很平滑。但是steps方法不同，它把過度切分成很多步。每一步的區(qū)別很明顯。

這個例子只需要一句HTML

背景圖片

接下來添加一點樣式和背景圖片。

.fave {

width: 70px;

height: 50px;

background: url(images/twitter_fave.png) no-repeat;

background-position: 0 0;

}

當鼠標移上來的時候，我們使用steps方法逐步移動背景圖。

.fave:hover {

background-position: -3519px 0;

transition: background 1s steps(55);

}

這里需要注意第二個屬性，代碼的意思是當我們改變background的時候，執(zhí)行過度效果，時間為1s。steps(55)的意思是，把這過度效果平均分成55步走，因為我們總共有55幀。

效果就是，當我們把鼠標移上去的時候，就會執(zhí)行這等間隔的55步過度。

為什么不使用gif?

這里不適用gif的原因是文件會很大，而且?guī)什缓每刂啤６褂蒙鲜龅姆椒?#xff0c;我們可以暫定，倒帶，或者跳到任意幀。

steps()方法的其他用處

驅動背景圖片精靈生成動畫只是steps的一種使用方法。任何使用一些列特定步驟的動畫都可以用steps生成，比如做一個時鐘。

我是周曉楷，華南師范大學在校本科生，有輕微強迫癥，拖延癥，正在努力學習前端知識！微博@Helkyle。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的css3双击点赞动画,Twitter上的点赞动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。