您的位置:一分快三全天精准计划 > 一分快三免费计划网站-web前端 > Twitter的”fave”动画

Twitter的”fave”动画

2019-09-14 05:37

Twitter的”fave”动画

2015/05/12 · HTML5 · Twitter, 动画

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转发!
葡萄牙语出处:cssanimation.rocks。迎接加入翻译组。

Twitter的“fave” 动画

最近几年 Instagram通过引进一段新的动画重新规划了“fave”按钮(也叫“fav”)。这段动画并不借助于 CSS transition,而是由一四种图片组成的。下边显示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新创造这段动画。

活动产生的错觉

这段动画的效用类似于观看古老的西洋镜,该装置显示的是一类别一而再的拱卫着圆筒的插画。在下边包车型大巴示范中,我们不接纳圆筒,而是在有些元素内部显示一多级图片。

示例

把鼠标悬停在简单上就足以观看动画效果(请到原文翻看动画效果——译者注)。

在本示例中,大家将从塑造一多级能结成动画的图形起头。在此地,我们接纳来源 Instagram 的“fave”Logo动画的一对图片集:

图片 1

为了能让那几个帧动起来,大家须要把它们放置在一排上。在那些文件中,那几个帧已经排列在一排上了,那表示我们能够透过安装背景地方(background-position)属性使背景从第一帧过渡到最后一帧。

图片 2

Steps() 时序函数

大部的时序函数,举例 ease(缓冲)和 cubic-bezier(三遍贝塞尔),都能让要素从起始状态平滑地连接到最终状态。steps 时序函数与此分歧,它并不是平整地接通,而是将连接进度分割为自然数量的手续,况兼在那么些手续之间相当慢地活动。

图片 3

小编们先创造如下的 HTML 代码:

XHTML

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

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

背景图片

接下去, 大家能够增进一些体裁并设置背景图片地点:

图片 4

CSS

.fave { width: 70px; height: 50px; background: url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了截止状态后,一旦鼠标悬停在该因素上,背景就能从大家内定的地方移动到这一各类图片中最终一张的职分上(为了同盟浏览器,注意要增进相应的浏览器内核前缀——译者注)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{ background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请小心第2个准绳 animation。在本例中,大家采纳 steps 时序函数,让background-position 属性经历了一个持续时间为1秒的连片。在 steps 部分的“55”那个值,代表了这段动画是由55帧组成的。

当我们将鼠标悬停在那一个因素上时,所见到的遵循是其背景图片通过五14个一律的步调经历了一次对接。

除此以外那些案例,也足以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

怎么不行使gif?

固然也足以利用 gif 动画,但在那几个案例中并不是很体面。gif 文件的高低平时很大而且帧速率也难以调整。而利用这几个措施,咱们就可以用 CSS 对那么些动画举办悬停、倒回以及丰富多彩的调度。

“steps()”的其余用法

背景动画Smart(background sprites)仅仅只是 steps 时序函数的用法之一。除却该函数还适用于塑造其余索要一雨后冬笋离散步骤的动画。比方,你能够用该函数制作一个摆钟。

备忘小条

假诺您欣赏这篇小说,你能够将它分享在推特(TWTR.US),或然封存上边的备忘小条,以便参照他事他说加以考察。

图片 5

打赏协助本人翻译愈来愈多好作品,多谢!

打赏译者

打赏扶助本身翻译更加多好小说,多谢!

任选一种支付方式

图片 6 图片 7

赞 收藏 评论

关于我:刘健超-J.c

图片 8

前端,在路上... 个人主页 · 笔者的篇章 · 19 ·     

图片 9

本文由一分快三全天精准计划发布于一分快三免费计划网站-web前端,转载请注明出处:Twitter的&#8221;fave&#8221;动画

关键词: