十天精通CSS3

图片 37

十天精通CSS3

Twitter的”fave”动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,防止转发!
意大利共和国语出处:cssanimation.rocks。接待参加翻译组。

变形–旋转 rotate()

旋转rotate()函数由此点名的角度参数使元素相对原点进行旋转。它根本在二维空间内打开操作,设置贰个角度值,用来钦赐旋转的上升的幅度。即使这么些值为正值,成分相对原点中央顺时针旋转;倘使这么些值为负值,成分相对原点大旨逆时针旋转。如下图所示:

图片 1

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

演示结果

图片 2

 

Twitter的“fave” 动画

近来 推文(Tweet)通过引进生机勃勃段新的动画重新规划了“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轴相同的时候按一定的角度值进行翻调换形);

图片 3

第二个参数对应X轴,第叁个参数对应Y轴。若是第二个参数未提供,则值为0,也等于Y轴方向上无斜切。

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

图片 4

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

图片 5

示范演示:

经过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);
}

示范结果

图片 6

挪动发生的错觉

这段动画的效率形似于观望古老的西洋镜,该装置展现的是风姿洒脱多级延续的环抱着圆筒的插图。在上面包车型地铁示范中,大家不应用圆筒,而是在某些成分内部展现生机勃勃雨后苦笋图片。

变形–缩放 scale()

缩放 scale()函数 让要素依照主旨原点对目的进行缩放。

缩放 scale 具备二种状态:

1、 scale(X,Y)使成分水平方向和垂直方向同不经常候缩放(相当于X轴和Y轴同一时候缩放)

图片 7

例如:

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轴缩放)

图片 8

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

图片 9

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

演示结果

图片 10

注意: scale()的取值默许的值为1,当班值日设置为0.010.99时期的别样值,效能使四个要素裁减;而别的大于或等于1.01的值,效能是让要素放大。

示例

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

在本示例中,我们将从创设大器晚成多种能结合动画的图形发轫。在这里地,我们选拔来源
推特 的“fave”图标动画的局地图片集:

图片 11

为了能让那么些帧动起来,我们须要把它们放置在一排上。在这里个文件中,那几个帧已经排列在一排上了,那意味着大家得以由此设置背景地方(background-position)属性使背景从第大器晚成帧过渡到最后生机勃勃帧。

图片 12

变形–位移 translate()

translate()函数能够将元素向钦命的动向移动,雷同于position中的relative。或以轻松的领悟为,使用translate()函数,能够把成分从原位移动,而不影响在X、Y轴上的别样Web组件。

translate大家分为三种意况:

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

图片 13

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

图片 14

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

图片 15

实例演示:经过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);
}

示范结果

图片 16

Steps() 时序函数

绝大繁多的时序函数,譬如 ease(缓冲)和
cubic-bezier(二遍贝塞尔),都能让要素从开端状态平滑地连接到终极状态。steps
时序函数与此分化,它并非一马平川地连通,而是将联网进程分割为一定数量的步子,而且在这里些手续之间一点也不慢地活动。

图片 17

咱俩先制造如下的 HTML 代码:

XHTML

<section class=”fave”></section>

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

演示结果:

图片 18

背景图片

接下去, 大家得以加上一些体制并安装背景图片地方:

图片 19

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

请留神首个准则 animation。在本例中,我们运用 steps
时序函数,让background-position 属性经历了一个持续时间为1秒的连接。在
steps 部分的“55”这些值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在这里个成分上时,所看见的职能是其背景图片通过52个肖似的步子经历了三遍对接。

别的那几个案例,也得以用 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);
}

变形–原点 transform-origin

其他二个要素都有贰当中坚点,暗许意况之下,其主题点是处于元素X轴和Y轴的八分之四处。如下图所示:

图片 20

在尚未复位transform-origin改产生分原点地点的情状下,CSS变形进行的转动、位移、缩放,扭曲等操作都以以成分协和宗旨地点打开变形。但不菲时候,大家得以因而transform-origin来对成分举办原点地点变动,使成分原点不在元素的骨干岗位,以达到须求的原点地点。

transform-origin取值和要素设置背景中的background-position取值相符,如下表所示:

图片 21

示范体现:

因此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;
}

亲自过问结果:

图片 22

为啥不利用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属性首要有:

图片 23

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

演示结果:

鼠标移入

图片 24

鼠标移出

图片 25

特别注意:当“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;
}

身体力行结果:

鼠标移入

图片 26

鼠标移出

图片 27

备忘小条

若是您心爱那篇文章,你能够将它分享在Facebook,只怕封存上面的备忘小条,以便参谋。

图片 28

打赏扶持自身翻译越来越多好小说,多谢!

打赏译者

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

transition-timing-function属性指的是过渡的“缓动函数”。首要用以钦命浏览器的对接速度,以至连接期间的操作进市价况,当中要包罗以下二种函数:

图片 29

(单击图片可扩充)

案例显示:

在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%;
}

身体力行结果

鼠标移入:

图片 30

鼠标移出:

图片 31

打赏扶持作者翻译更多好作品,多谢!

任选意气风发种支付格局

图片 32
图片 33

赞 收藏
评论

卡通–过渡延迟时间 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;
}

亲自过问结果

鼠标移入:

图片 34

鼠标移出:

图片 35

至于笔者:刘健超-J.c

图片 36

前端,在路上…
个人主页 ·
笔者的稿子 ·
19 ·
    

图片 37

admin

网站地图xml地图