Twitter "fave"動畫

　　Twitter最近更新了一個叫作「fave」的設計，也被叫作fav按鈕。這個按鈕有一種新的動畫。他們運用的是一連串的圖片，而不是css transition來作的，其實道理也很簡單，不過很酷炫，這裏就介紹一下怎麼使用CSS animation的steps這個timing function來完成這樣一個動畫吧。

　　這個動畫，用到了雪碧圖，在雪碧圖的幫助下加上animation動畫，就能夠輕鬆地完成這樣一個簡單又有趣的小動畫了，廢話少說，直接上教程：

　　要作這樣一個動畫，首先咱們須要把圖片放成一排，不過不放也能夠啦，不過待會用backgroung-positon的時候會比較蛋疼。這裏提供一下這個一排的圖片：

　　關於STEP函數
　　像ease或者cubic-bezier等，都是用來在動畫開始和結束之間用來平滑過渡用的。可是steps時間函數不同，初用steps函數，你可能會感到奇怪，由於以前並無接觸過（博主在本身進行實驗才發現原來steps函數傳入的數值n就是把這一張圖，好比有56張圖，從第一張圖到最後一張，須要「走」55步，就分爲55份，同時也把前面定義的動畫時間分紅了55份，每次顯示55分之1）

 

　　開始HTML：

　　

<section class="fave"></section>

 

　　接下來就是CSS了：

.fave{
            width:70px;
            height: 50px;
            background: url(twitter_fave.png); no-repeat;
            background-position: 0 0;
        }
        .fave:hover{
            -webkit-animation:fave 1s steps(55);
            cursor: pointer;
            background-position: -3519px 0;
            transition:background 1s steps(55);
        }
        @-webkit-keyframes fave{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -3519px 0;
            }
        }

　　這裏我用得是的animation，固然要記得兼容性問題，除此以外，還能夠用transtion來作，就是我上面代碼註釋掉的部分，也能夠達到一樣的效果。

　　怎麼樣，還挺有趣的吧！

　　哈哈，結尾聲明一下，文章是我本身翻譯外國前端博客的，原文地址以下：

https://cssanimation.rocks/twitter-fave/

 

謝謝支持！！