你的位置:首页 > 网页设计

[网页设计]css笔记——区分css3中的transform transition animation


出处:http://blog.csdn.net/dyllove98/article/details/8957232
 
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 | [ <IDENT> ]

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是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为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效果,取 值:<time>为数值,单位为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之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。

一个官网的示例:

@-webkit-keyframes '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% 来过渡。

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

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

.demo1 {   width: 50px;   height: 50px;   margin-left: 100px;   background: blue;   -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/   -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:是用来定义一个动画的名称,为Keyframes中的名称,否则不会有动画效果。none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

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