CSS3中动画属性transform、transition 和 animation

导语   CSS3中和动画有关的属性有三个 transform、transition 和 animation。下面来一一说明:  transform  从字面来看transform的释义为改变,使…变形;转换 。这里我们就可以理解为变形。那都能怎么变呢? 

  CSS3中和动画有关的属性有三个 transform、transition 和 animation。下面来一一说明:

  transform

  从字面来看transform的释义为改变,使…变形;转换 。这里我们就可以理解为变形。那都能怎么变呢?

  none 表示不进行变换;

  rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值(50px 70px)。

  skew 扭曲 transform:skew(30deg,30deg) skew(相对x轴倾斜,相对y轴倾斜)

  scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。

  translate 移动 transform:translate(50px, 50px);

  matrix 矩阵变形 基本语法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一个二维矩阵:

  ┌ ┐

  │ a b │

  │ c d │

  └ ┘

  a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜

  tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate (tx,ty)

  Transition

  W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

  transition主要包含四个属性值:transition-property: 执行变换的属性;

  transition- duration: 变换延续的时间:

  transition-timing-function: 在延续时间段,变换的速率变化;

  transition- delay :变换延迟时间

  下面一一说明这四个属性:

  transition-property

  语法:

  transition-property : none | all | [ ]

  transition-property是用来指定当元素其中一个属性改变时执行transition效果,其 主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下:

  1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;

  2、length:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;

  3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;

  4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;

  5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;

  6、transform list:详情请参阅:《CSS3 Transform》。

  7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;

  8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;

  9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;

  10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;

  11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;

  12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;

  13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

  支持执行transition效果的属性:

  Property NameType

  background-coloras color

  background-positionas repeatable list of simple list of length, percentage, or calc

  border-bottom-coloras color

  border-bottom-widthas length

  border-left-coloras color

  border-left-widthas length

  border-right-coloras color

  border-right-widthas length

  border-spacingas simple list of length

  border-top-coloras color

  border-top-widthas length

  bottomas length, percentage, or calc

  clipas rectangle

  coloras color

  font-sizeas length

  font-weightas font weight

  heightas length, percentage, or calc

  leftas length, percentage, or calc

  letter-spacingas length

  line-heightas either number or length

  margin-bottomas length

  margin-leftas length

  margin-rightas length

  margin-topas length

  max-heightas length, percentage, or calc

  max-widthas length, percentage, or calc

  min-heightas length, percentage, or calc

  min-widthas length, percentage, or calc

  opacityas number

  outline-coloras color

  outline-widthas length

  padding-bottomas length

  padding-leftas length

  padding-rightas length

  padding-topas length

  rightas length, percentage, or calc

  text-indentas length, percentage, or calc

  text-shadowas shadow list

  topas length, percentage, or calc

  vertical-alignas length

  visibilityas visibility

  widthas length, percentage, or calc

  word-spacingas length

  z-indexas integer

  transition-duration

  transition-duration是用来指定元素 转换过程的持续时间,取值:

为数值,单位为s(秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

  transition-timing-function

  取值:

  transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

  1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);

  2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);

  3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);

  4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);

  5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);

  6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

  其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。

  transition-delay

  transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,取 值:

为数值,单位为s(秒),它的使用和transition-duration极其相似,也可以作用于所有元素,包 括:before和:after伪元素。 默认大小是”0″,也就是变换立即执行,没有延迟。

  有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么我们只要把几个transition的 声明串 在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与 transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如:

  a {transition: background 0.5s ease-in,color 0.3s ease-out}

  如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

  a{transition: all 0.5s ease-in}

  }

  animation

  顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Key s",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。

  一个官网的示例:

  @-webkit-key s 'wobble' {

  0% {

  margin-left: 100px;

  background: green;

  }

  40% {

  margin-left: 150px;

  background: orange;

  }

  60% {

  margin-left: 75px;

  background: blue;

  }

  100% {

  margin-left: 100px;

  background: red;

  }

  }

  这里我们定义了一个叫“wobble”的动画,名字任意取。分几个阶段0% 40% 60% 100% 来过渡。

  key s定义好了以后,就可以去调用定义好的动画“wobble”了。

  下面我们来看看怎么给一个元素调用animation属性

  .demo1 {

  width: 50px;

  height: 50px;

  margin-left: 100px;

  background: blue;

  -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面key s定义的动画名*/

  -webkit-animation-duration: 10s;/*动画持续时间*/

  -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

  -webkit-animation-delay: 2s;/*动画延迟时间*/

  -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

  -webkit-animation-direction: alternate;/*定义动画方式*/

  }

  animation-name:

  animation-name:是用来定义一个动画的名称,为Key s中的名称,否则不会有动画效果。none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

  CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的 animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要key s来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。


http://www.aseoe.com/ true CSS3中动画属性transform、transition 和 animation http://www.aseoe.com/show-12-828-1.html report <?php echo strlen($content) / 2; ?>   CSS3中和动画有关的属性有三个 transform、transition 和 animation。下面来一一说明:  transform  从字面来看transform的释义为改变,使…变形;转换 。这里我们就可以理解为变形。那都能怎么变呢? 
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-12-828-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)