Twitter的”fave”动画

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

本文由伯乐在线 - 刘健超-J.c 翻译，胡屹校稿。未经许可，禁止转发！
塞尔维亚（Serbia）语出处：cssanimation.rocks。款待加入翻译组。

变形--旋转 rotate()

旋转rotate()函数经过点名的角度参数使成分绝对原点进行旋转。它至关心珍视要在二维空间内开展操作，设置二个角度值，用来内定旋转的大幅。若是这些值为正值，成分绝对原点大旨顺时针旋转；即便那个值为负值，成分相对原点主旨逆时针旋转。如下图所示：

HTML代码：

<div class="wrapper">
  <div></div>
</div>

CSS代码：

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

示范结果

Twitter的“fave” 动画

近些年 Facebook通过引进一段新的动画重新设计了“fave”按键（也叫“fav”）。这段动画并不借助 CSS transition，而是由一层层图片组成的。上面呈现什么用 CSS 的 animation-timing-function 属性中的 steps 时序函数（timing function）重新制作这段动画。

变形--扭曲 skew()

扭曲skew()函数能够让要素倾斜呈现。它能够将叁个目的以其宗旨地点围绕着X轴和Y轴依照一定的角度倾斜。这与rotate()函数的转动分裂，rotate()函数只是旋转，而不会变动成分的形状。skew()函数不会旋转，而只会改变成分的形象。

Skew()具有三种情景：

1、skew(x,y)使成分在档案的次序和垂直方向相同的时间扭曲（X轴和Y轴同一时候按自然的角度值举行翻转换形）；

第二个参数对应X轴，第一个参数对应Y轴。假使第三个参数未提供，则值为0，相当于Y轴方向上无斜切。

2、skewX(x)仅使成分在档案的次序方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使成分在笔直方向扭曲变形（Y轴扭曲变形）

亲自过问演示：

由此skew（）函数将纺锤形变成平行四边形。

HTML代码：

<div class="wrapper">
  <div>我变成平形四边形</div>
</div>

CSS代码：

.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}
.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform:skew(45deg) 
  transform:skew(45deg);
}

示范结果

挪动发生的错觉

这段动画的功用类似于观看古老的西洋镜，该装置显示的是一多种接二连三的环绕着圆筒的插图。在底下的身体力行中，大家不使用圆筒，而是在有个别成分内部显示一密密麻麻图片。

变形--缩放 scale()

缩放 scale()函数 让要素依照宗旨原点对目的开展缩放。

缩放 scale 具备三种情状：

1、 scale(X,Y)使元素水平方向和垂直方向同期缩放（也正是X轴和Y轴同期缩放）

例如：

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}

在意：Y是二个可选参数，如果没有安装Y值，则意味着X，Y四个方向的缩放倍数是同一的。

2、scaleX(x)成分仅水平方向缩放（X轴缩放）

3、scaleY(y)成分仅垂直方向缩放（Y轴缩放）

HTML代码：

<div class="wrapper">
  <div>我将放大1.5倍</div>
</div>

CSS代码：

.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}
.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(1.5);
  -moz-transform:scale(1.5)
  transform: scale(1.5);
}

示范结果

注意： scale()的取值默许的值为1，当班值日设置为0.01到0.99里头的其余值，作用使二个要素减弱；而别的大于或等于1.01的值，成效是让要素放大。

示例

把鼠标悬停在有限上就能够看到动画效果（请到原文查阅动画效果——译者注）。

在本示例中，大家将从构建一多级能结成动画的图样初步。在此间，大家利用来源 Facebook 的“fave”Logo动画的部分图片集：

为了能让那些帧动起来，大家要求把它们放置在一排上。在那一个文件中，这么些帧已经排列在一排上了，那意味着大家得以因而设置背景地点（background-position）属性使背景从第一帧过渡到最后一帧。

变形--位移 translate()

translate()函数能够将成分向钦点的来头移动，类似于position中的relative。或以轻松的明白为，使用translate()函数，能够把元素从原来的职位移动，而不影响在X、Y轴上的其他Web组件。

translate大家分为二种状态：

1、translate(x,y)水平方向和垂直方向同一时间活动（相当于X轴和Y轴同期活动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

实例演示：透过translate()函数将成分向Y轴下方移动50px,X轴右方移动100px。

HTML代码：

<div class="wrapper">
  <div>我向右向下移动</div>
</div>

CSS代码：

.wrapper {
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  margin: 20px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  color: #fff;
  -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);
}

亲自过问结果

Steps() 时序函数

绝大多数的时序函数，举个例子 ease（缓冲）和 cubic-bezier（三遍贝塞尔），都能让要素从开端状态平滑地衔接到结尾状态。steps 时序函数与此不相同，它而不是一马平川地连贯，而是将联网进度分割为一定数量的手续，何况在那一个步骤之间赶快地移动。

大家先创设如下的 HTML 代码：

XHTML

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

变形--矩阵 matrix()

matrix() 是三个含三个值的(a,b,c,d,e,f)转变矩阵，用来内定一个2D转移，相当于直接使用二个[a b c d e f]退换矩阵。便是依据水平方向（X轴）和垂直方向（Y轴）重新定位成分,此属性值使用涉及到数学中的矩阵，笔者在此处只是简单来讲一下CSS3中的transform有这么叁个属性值，倘若须要深远了然，须要对数学矩阵有早晚的学识。

演示演示：由此matrix()函数来效仿transform中translate()位移的作用。
HTML代码：

<div class="wrapper">
  <div></div>
</div>

CSS代码：

.wrapper {
  width: 300px;
  height: 200px;
  border: 2px dotted red;
  margin: 40px auto;
}
.wrapper div {
  width:300px;
  height: 200px;
  background: orange;
  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);
}

示范结果：

背景图片

接下去，大家能够加上一些体制并设置背景图片地方：

CSS

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

.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; } }

.fave:hover{

animation: fave 1s steps(55);

}

@keyframes fave{

0%{

background-position:0 0;

}

100%{

background-position:-3519px 0;

}

请留心第4个法则 animation。在本例中，大家运用 steps 时序函数，让background-position 属性经历了二个持续时间为1秒的接入。在 steps 部分的“55”这几个值，代表了这段动画是由55帧组成的。

当大家将鼠标悬停在那几个因素上时，所见到的效果是其背景图片通过55个一律的手续经历了一回对接。

除此以外那些案例，也能够用 transition 实现：

CSS

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

.fave:hover {

background-position: -3519px 0;

transition: background 1s steps(55);

}

变形--原点 transform-origin

别的叁个成分皆有多少个基本点，暗许情状之下，其焦点点是处在成分X轴和Y轴的一半处。如下图所示：

在并未有复位transform-origin改形成分原点地方的图景下，CSS变形进行的团团转、位移、缩放，扭曲等操作都以以成分和煦大旨地点打开变形。但众多时候，咱们得以由此transform-origin来对成分举行原点地方变动，使成分原点不在成分的基本地方，以完结须要的原点地点。

transform-origin取值和要素设置背景中的background-position取值类似，如下表所示：

示范展现：

经过transform-origin更换成分原点到左上角，然后开展顺时旋转45度。

HTML代码：

<div class="wrapper">
  <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
  <div>原点重置到左上角</div>
</div>

CSS代码：

.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

示范结果：

为啥不应用gif？

虽说也足以利用 gif 动画，但在那个案例中实际不是很适宜。gif 文件的大小平日一点都不小何况帧速率也不便调节。而选用那么些方法，我们就足以用 CSS 对那些动画举行截至、倒回以及形形色色的调治。

卡通--过渡性质 transition-property

最早在Web中要兑现动画效果，都以依赖于JavaScript或Flash来产生。但在CSS3中新净增了贰个新的模块transition，它能够经过一些简约的CSS事件来触发成分的外观变化，让效果显得愈发细腻。轻松点说，就算经过鼠标的单击、得到宗旨，被点击或对成分任何改动中触发，并平滑地以卡通效果更改CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是三个复合属性，主要不外乎以下几个子属性：

transition-property:钦点过渡或动态模拟的CSS属性
transition-duration:内定达成交接所需的日子
transition-timing-function:钦定过渡函数
transition-delay:钦定先导产出的延迟时间

先来看transition-property属性

transition-property用来钦命接通动画的CSS属性名称，而以此过渡性质唯有具备二个中式茶食值的性质（须求发出动画的性质）技术抱有过渡效果，其对应享有过渡的CSS属性首要有：

HTML:

<div></div>

CSS:

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

亲自去做结果:

鼠标移入

鼠标移出

特别注意：当“transition-property”属性设置为all时，表示的是颇具中点值的特性。

用一个总结的例子来注解那个难题：

一经你的起来状态设置了体制“width”,“height”,“background”,当您在终始状态都转移了那多少个特性，那么all表示的正是“width”、“height”和“background”。假设您的终始状态只变动了“width”和“height”时，那么all意味着的正是“width”和“height”。

“steps()”的别的用法

背景动画Smart（background sprites）仅仅只是 steps 时序函数的用法之一。除外该函数还适用于构建其余索要一密密麻麻离散步骤的卡通片。举例，你能够用该函数制作四个摆钟。

动画片--过渡所需时间 transition-duration

transition-duration特性主要用于设置叁性格质过渡到另壹特个性所需的时光，也正是从旧属性过渡到新属性开支的小运长短，俗称持续时间。

案例演示：

在鼠标悬停（hover）状态下，让容器从直角逐步过渡到圆角，并让总体动画持续0.5s。

HTML:

<div></div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 20px;
}

以身作则结果：

鼠标移入

鼠标移出

备忘小条

一旦您心爱这篇小说，你能够将它分享在照片墙，或然封存上边包车型客车备忘小条，以便参谋。

打赏帮忙笔者翻译越多好文章，多谢！

打赏译者

动画--过渡函数 transition-timing-function

transition-timing-function属性指的是联网的“缓动函数”。首要用来内定浏览器的交接速度，以及连接时期的操作进行景况，在那之中要包含以下两种函数：

(单击图片可推广)

案例显示：

在hover状态下，让容器从贰个星型逐步过渡到贰个圆形，而整整过渡是先加快再减速，也正是运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

躬行实践结果

鼠标移入：

鼠标移出：

打赏援救本人翻译更加多好小说，多谢！

任选一种支付办法

赞收藏评论

卡通--过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极端类似，差别的是transition-duration是用来设置过渡动画的持续时间，而transition-delay首要用于钦赐八个卡通开头进行的年华，也正是说当退换成分属性值后多久开首执行。

突发性大家想改变七个可能多个css属性的transition效果时，只要把多少个transition的注解串在一道，用逗号（“，”）隔离，然后分别能够有各自差别的持续时间和其时间的速率转变格局。但须求值得注意的一些：第三个小时的值为 transition-duration，第一个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

演示演示：

由此transition属性将多个200px *200px的碳灰容器，在鼠标悬浮状态时，过渡到二个300px * 300px的新民主主义革命容器。而且整个过渡0.1s后触发，何况整个过渡持续0.28s。

HTML代码:

<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

CSS代码:

.wrapper {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 2px dotted red;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background-color: orange;
  -webkit-transition: all .28s ease-in .1s;
  transition: all .28s ease-in .1s;
}
.wrapper div:hover {
  width: 300px;
  height: 300px;
  background-color: red;
}

演示结果

鼠标移入：

鼠标移出：

至于小编：刘健超-J.c

前端，在路上... 个人主页 · 作者的稿子 · 19 ·

本文由大发体育娱乐在线发布于前端学习,转载请注明出处：十天精通CSS3

关键词：

大发体育娱乐在线

大发体育娱乐在线 > 前端学习 >

十天精通CSS3

Twitter的”fave”动画

变形--旋转 rotate()

Twitter的“fave” 动画

变形--扭曲 skew()

挪动发生的错觉

变形--缩放 scale()

示例

变形--位移 translate()

Steps() 时序函数

变形--矩阵 matrix()

背景图片

变形--原点 transform-origin

为啥不应用gif？

卡通--过渡性质 transition-property

“steps()”的别的用法

动画片--过渡所需时间 transition-duration

备忘小条

动画--过渡函数 transition-timing-function

打赏援救本人翻译更加多好小说，多谢！

卡通--过渡延迟时间 transition-delay

至于小编：刘健超-J.c

频道精选

最火资讯