设置一个角度值必威:,本教程分为以下三步

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

 

本课程分为以下三步:

连通和卡通

transition(过渡)
在CSS3引进transition从前css没一时间轴,全体的动静变化都以刹那间到位
div{ height:15px; width:15px;}div:hover{ height: 450px; width: 450px;}

transition的机能在于,钦点状态变化所须求的小时
transition: 1s;

点名属性
大家仍可以钦点transition适用的习性,比方只适用于height
transition: 1s height;

那样一来,唯有height的转换需要1秒达成,别的变化(主假诺width)依然弹指间兑现,在同一行transition语句中,能够分别内定七个属性
transition: 1s height, 1s width;

delay(延时)
咱俩还足以钦命变化的延时起来,比如这几个地点我们期待让height先爆发变化,等终结之后,再让width发生变化, 我们只要求为width钦赐贰个delay参数
transition: 1s height, 1s 1s width;

地点代码钦赐,width在1秒未来,再最先转移,相当于延迟(delay)1秒
delay的实在意义在于,它钦点了动画发生的相继,使得八个例外的transition能够连在一同,产生复杂效果
transition-timing-function
transition的事态变化速度(又称timing function),暗中同意不是匀速的,而是慢慢放缓,那叫做ease 除了ease以外,其余情势还包罗
linear:匀速
ease-in:加速
ease-out:减速
cubic-bezier函数(贝塞尔函数)

贝塞尔函数工具
语法
transition: 1s 1s height ease;

那实际上是四个简写情势,能够独立定义成各种属性
transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;

注意事项
最近,各大浏览器(包罗IE 10)都曾经支撑无前缀的transition,所以transition已经足以很安全地不加浏览器前缀
transition须求显明领悟,初步情形和终止状态的切切实实数值,能力总结出中间状态,什么none到block之类的是不行的
transition是叁遍性的,不可能再度爆发,除非反复触发

事件
transitionend
transitionend 事件会在 CSS transition 截至后触发.
当transition实现前移除transition时,例如移除css的transition-property 属性,事件将不会被触发.如在transition落成前安设 display: none,事件一样不会被触发.
多少个属性发生了改动就接触一遍,比方 ``` div{ transition: height 1s, width 1s; } div:hover{ width: 100px; height: 100px; }

叁回hover会触发两次transitionend事件

  • 注意差别浏览器中的前缀 + webkitTransitionEnd + mozkitTransitionEnd

作者: 阮一峰

Twitter的“fave” 动画

近几来 照片墙通过引进一段新的卡通重新规划了“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轴,第2个参数对应Y轴。若是第2个参数未提供,则值为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

Step1 - Photoshop

animation(动画)

transition 比较轻松,animation能够帮大家兑现复杂的卡通

当今,笔者非常少写介绍CSS的稿子,因为以为网址开辟的重大仍然在服务器端。

移动发生的错觉

这段动画的法力类似于阅览古老的西洋镜,该装置显示的是一名目好多接二连三的拱卫着圆筒的插图。在底下的示范中,我们不利用圆筒,而是在有个别成分内部显示一多种图片。

变形--缩放 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的值,功用是让要素放大。

Step2 - HTML/CSS

主干用法

@keyframes change-color{ 0% { background: red; } 50%{ background: blue; } 100%{ background: orange; }}div{ height: 100px; width: 200px; border: 1px solid #111;}div:hover{ animation-name: change-color; animation-duration: 2s;}

咱俩选拔keyframes(关键帧)来定义三个动画片效果, change-color是大家得到动画名字,每一种百分比后边写的是应和时间点本身第一帧样式, 定义好后,在animation(动画)属性中调用,2s 表示的动画片的持续时间
 钦赐播放次数(animation-iteration-count)
默许情况下,动画只会播放一遍, 大家得以钦赐动画具体播放的次数,举个例子3次:
div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: 3;}

也足以有线循环播放:
div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: infinite;}

心跳demo
延时(animation-delay)
animation-timing-function
卡通播放前后的情景(animation-fill-mode)
animation-fill-mode: none | backwards | forwards| both;

none: 动画实施前后不改变任何样式
forwards: 动画甘休后的目的保持动画最终一帧的体制
backwards: 动画起来前目的保持动画第一帧的样式(必须合营延时才能看出效果, 倘若设置为backwards, 延时之间的体制是动画第一帧的体裁, 不然延时中间是目的暗中同意样式)
both: 同不经常候接纳forwards和 backwards

动画片播放的趋势(animation-direction)
动画片延续播放时,每一次都以从甘休状态跳回到开头状态,再起来播报。animation-direction属性,能够改动这种表现
animation-direction能够选择下列值:
normal: 经常播放, 暗许值;
reverse: 倒着播放
alternate: 第壹回正常播放, 第二倒着播放, .. 那样交替的巡回下去
alternate-reverse: 第叁遍倒着播放, 第三次寻常播放, .. 那样交替的循环下去

下图解释了它的原理(假定动画两次三番播放叁遍)

必威 11

简轻松单说,animation-direction钦定了动画播放的可行性,最常用的值是normal和reverse。浏览器对别的值的支撑意况不好,应该慎用
语法
div:hover { animation-name: change-color; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3;}

简写
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;

例子:
div:hover { animation: 1s 1s change-color linear 3 forwards normal;}

keyframes关键字用来定义动画的依次状态,它的写法特别自由
@keyframes change-color { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen }}

0%能够用from代表,百分百能够用to代表,因而地点的代码等同于下边包车型地铁花样
@keyframes change-color { from { background: #c00 } 50% { background: orange } to { background: yellowgreen }}

只要轻便有个别状态,浏览器会自行推算中间状态,所以上边都以官方的写法。
@keyframes change-color { 50% { background: orange } to { background: yellowgreen }}@keyframes change-color { to { background: yellowgreen }}

竟然,能够把多少个情景写在一行。
div:hover { animation: 1s change-color infinite steps(10);}

除此以外一些须要注意的是,浏览器从二个状态向另三个情景过渡,是平整过渡。steps函数能够完毕分步过渡。
div:hover { animation: 1s change-color infinite steps(10);}

文字输入效果demo
animation-play-state
有的时候,动画播放进度中,会忽地停下。那时,私下认可行为是跳回到动画的启幕意况,假设想让动画片保持突然止住时的景况,将要选取animation-play-state属性。
div { animation: spin 1s linear infinite; animation-play-state: paused;}div:hover { animation-play-state: running;}

唯独,CSS动画除却,它实际太有用了。

示例

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

在本示例中,大家将从构建一雨后玉兰片能结成动画的图形开端。在此地,大家使用来源 Twitter 的“fave”Logo动画的有些图片集:

必威 12

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

必威 13

变形--位移 translate()

translate()函数能够将成分向钦赐的取向移动,类似于position中的relative。或以轻便的敞亮为,使用translate()函数,能够把成分从原来的岗位移动,而不影响在X、Y轴上的任何Web组件。

translate我们分为三种状态:

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

必威 14

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

必威 15

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

必威 16

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

演示结果

必威 17

Step3 - JavaScript(jQuery)

必威 18

Steps() 时序函数

许多的时序函数,比方 ease(缓冲)和 cubic-bezier(叁次贝塞尔),都能让要素从初阶状态平滑地连贯到终极状态。steps 时序函数与此不一致,它并不是一马平川地衔接,而是将衔接进程分割为自然数量的步骤,何况在这么些手续之间相当的慢地移动。

必威 19

我们先创制如下的 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);
}

亲自去做结果:

必威 20

Step4 - CSS修改

 

  最后结出如下:

必威 21

正文介绍CSS动画的两大组成都部队分:transition和animation。我不准备提交每一条属性的详尽介绍,那样能够写一本书。那篇作品只是贰个简要介绍,帮助初学者通晓全貌,同一时间又是二个便捷指南,当你想不起某贰个用法的时候,可以急迅地找到提醒。

本文由必威发布于必威-前端,转载请注明出处:设置一个角度值必威:,本教程分为以下三步

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。