box-shadow，translate translate transition的区别

最新推荐文章于 2022-05-29 16:14:54 发布

晴天Smile

最新推荐文章于 2022-05-29 16:14:54 发布

阅读量791

点赞数

分类专栏： web前端经验

web前端经验专栏收录该内容

6 篇文章 1 订阅

订阅专栏

http://www.css88.com/tool/css3Preview/Linear-Gradients.html

translate:移动，transform的一个方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

用法transform: translate(50px, 100px);

-ms-transform: translate(50px,100px);

-webkit-transform: translate(50px,100px);

-o-transform: translate(50px,100px);

-moz-transform: translate(50px,100px);

transform:变形。改变

CSS3中主要包括旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)

扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)

缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)

移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素

matrix(scale.x ,, , scale.y , translate.x, translate.y)

改变起点位置 transform-origin: bottom left;

综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;

Transform

　　transform:rotate()：

　　含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

　　.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

　　transform:skew()：含义：倾斜；

　　.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

　　transform:scale()：

　　含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

　　.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

　　transform:translate()：

　　含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

　　.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，

需要事件的触发，例如单击、获取焦点、失去焦点等

transition:property duration timing-function delay;

property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform

duration:持续时间

timing-function:ease等

delay:延迟

注意：当property为all的时候所有动画

例如：transition:width 2s ease 0s;

http://www.w3cplus.com/content/css3-transition

Transition又包含了四个子属性，分别为property、duration、timing-function、delay

1. transition-property:

property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值background。

2. transition-duration:

duration针对了过渡效果的持续时间。

3. transition-timing-function:

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但W3C给出了一张曲线图，一看就明白了（后附图）。

介绍下预留的几个特效：
ease: 默认值（先快后慢）
linear: 匀速
ease-in: 先慢后快
ease-out: 先快后慢
ease-in-out: 先慢后快后慢
cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]

其中的cubic-bezier即为貝茲曲線中的绘制方法

图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的

4. transition-delay:

duration针对了过渡效果的延迟执行时间。

5. 代码演示：

1). 过渡单个属性：

[html] view plain copy 
      
 transition-property:opacity;  
 transition-duration:2s;  
 transition-timing-function:ease-in;  
 transition-delay:0;

2). 过渡多个属性：

[1]. 上下一一对应型：

[html] view plain copy 
      
 transition-property:opacity left;  
 transition-duration:2s, 4s;  
 transition-timing-function:ease-in;  
 transition-delay:0;

此时：opacity过渡时间为2s，left过渡时间为4s。

[2]. 循环对应型：

[html] view plain copy 
      
 transition-property:opacity left width height;  
 transition-duration:2s, 4s;  
 transition-timing-function:ease-in;  
 transition-delay:0;

此时：opacity和width过渡时间为2s，left和height过渡时间为4s。

3). transition简写模式：
顺序为：transition-property transition-duration transition-timing-function transition-delay

[html] view plain copy 
      
 /*单个属性：*/  
 -moz-transition:background 0.5s ease-out 0s;  
 /*多个属性：*/  
 -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-

最近稍微玩了一下CSS几个有用的新特性，

主要是transition(过渡效果),translate( 移动),transform(变形)以及animation( 动画)。
几个新特性的叠加可以产生很强大的效果，而且比起写JS要方便得多，当然，目前只有webkit和mozilla以及难见踪影的IE10支持CSS3，webkit支持得最好，moz次之，IE杯具。所以目前CSS3的应用主要还是在iOS和android上会比较有前途，PC上就算了，玩玩就好了。稍微介绍一下这几个属性。
1.CSS3 Transitions 过渡效果
可以很方便地指定两种样式之间的切换过渡效果，比方说我们移动一个div的位置，从x = 0px 到 x = 200px，这时候使用transition指定缓动效果为ease-in- out，我们可以看到DIV移动时会减速。

.box:hover{  /* 这里的all是指适用在所有效果，如果想只适用width或者height，直接替换即可，多个效果用“,”隔开 */      -moz-transition: all 800ms;      -webkit-transition: all 800ms;      -o-transition: all 800ms;      -ms-transition: all 800ms;  }

2.CSS3 Translate 移动元素
以前如果我们要写一个元素移动的动画，通常我们会设置某元素位置为absolute，然后通过JS改变其top,left,right, bottom等属性来实现动画，现在我们可以使用css3 translate来做到这一点，而完全不需要设置position为absolute。另外，这里提醒一下大家，使用css translate在android上相当杯具，而在iOS的mobile safari里面使用，则transalte2d的效果远远不如translate3d ，所以，如果需要在mobile safari里面使用该属性，强烈建议使用translate3d(x,y,z)的形式，即使只是修改其中的X或者Y，也这样写。我测试过使用translateX或者translateY，效果跟2d的一样烂。
而translate3d是webkit才支持的属性，估计内部实现与2d不同，所以效果流畅很多。

.example:hover .translate{  /*这里示例的是2D的translate，参数为x,y，如果用3D则translate3d(x,y,z)，但目前只有webkit支持3D*/  -moz-transform: translate(500px,0);  -webkit-transform: translate(500px,0);  -o-transform: translate(500px,0);  -ms-transform: translate(500px,0);  }

3.CSS3 transform 形变
CSS3提供了几个很有用的属性来改变元素的形状：缩放scale，旋转rotate，倾斜skew。（IE10+ 也支持，但是要加-ms-前缀。）

.rotate:hover{  -moz-transform: rotate(720deg);  -webkit-transform: rotate(720deg);  -o-transform: rotate(720deg);  -ms-transform: rotate(720deg);  }

Transform

在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的（有待研究）。其他的属性则根据这个属性来计算进行计算。

关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说，应该只需要preserve-3d就好了，但是从谣传“开启了perserve-3d就使用了GPU加速”来说，这个属性可能是为了降低系统消耗用的，毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有以下五个：

translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

总体看来 css transform的属性和原来使用的left ，right ，top， bottom 的属性从动静角度来说没有任何区别，因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

Transition

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

其中animate的transition的属性的意思说：当你的left属性发生变化的时候，执行动画效果（仅仅基于left的属性变化，其他的属性不会加入到动画变化里面去）；

首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候，元素的属性变化，触发webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了animation属性的复杂程度。

同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

我在css编写的时候，因为变化的属性只有transform一个，因此在transtion属性里面指定响应属性为all，可以响应并执行元素所有属性的变化动画（能做动画的属性）。

Animation

在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。

做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而css keyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
	left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

晴天Smile

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
box-shadow，translate translate transition的区别

http://www.css88.com/tool/css3Preview/Linear-Gradients.htmltranslate:移动，transform的一个方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：用法transform:
复制链接

扫一扫

专栏目录