Twitter "fave"动画

标签：

　　Twitter最近更新了一个叫做“fave”的设计，也被叫做fav按钮。这个按钮有一种新的动画。他们运用的是一连串的图片，而不是css transition来做的，其实道理也很简单，不过很酷炫，这里就介绍一下怎么使用CSS animation的steps这个timing function来完成这样一个动画吧。

　　这个动画，用到了雪碧图，在雪碧图的帮助下加上animation动画，就可以轻松地完成这样一个简单又有趣的小动画了，废话少说，直接上教程：

　　要做这样一个动画，首先我们需要把图片放成一排，不过不放也可以啦，不过待会用backgroung-positon的时候会比较蛋疼。这里提供一下这个一排的图片：

　　关于STEP函数
　　像ease或者cubic-bezier等，都是用来在动画开始和结束之间用来平滑过渡用的。但是steps时间函数不一样，它是用来把动画分成若刚个步骤，然后干脆地在每一个步骤之间切换。

　　开始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/

谢谢支持！！

Twitter "fave"动画

标签：

原文地址：http://www.cnblogs.com/danielweb/p/4513081.html