普京网址 11

用来指定旋转的幅度普京网址:,transition的作用在于

Twitter的”fave”动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,防止转发!
匈牙利(Hungary)语出处: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” 动画

方今 Twitter通过引进一段新的动画片重新规划了“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

Step1 – Photoshop

Step1 – Photoshop

animation(动画)

transition 相比较轻便,animation能够帮大家完结复杂的卡通

一举手一投足发生的错觉

这段动画的效果类似于阅览古老的西洋镜,该装置呈现的是一两种接二连三的环抱着圆筒的插画。在底下的演示中,大家不应用圆筒,而是在有些成分内部突显一密密麻麻图片。

变形–缩放 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

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: 第2回倒着播放, 第叁次平常播放, .. 那样交替的大循环下去

下图解释了它的法规(假定动画接二连三播放一遍)

普京网址 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;}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章