CSS3中的Transition属性详解
CSS3中的Transition属性详解（贝赛尔曲线）
CSS3中的Transition属性详解（贝赛尔曲线）transition语法：1 transition ： [<'transition-property'> || <'transition-duration'> ||2<'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> ||3<'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*transition主要包含四个属性值：执⾏变换的属性：transition-property；变换延续的时间：transition- duration；在延续时间段，变换的速率变化transition-timing-function；变换延迟时间transition- delay。
下⾯分别来看这四个属性值：⼀、transition-property：语法：1 transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*transition-property是⽤来指定当元素其中⼀个属性改变时执⾏transition效果，其主要有以下⼏个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停⽌执⾏，当指定为all 时，则元素产⽣任何属性值变化时都将执⾏transition效果，ident是可以指定元素的某⼀个属性值。
css3-transform,transition与translate
css3-transform,transition与translate零.序⾔ css 3 的新特性，很多都停留在听说⽽⾮实际使⽤。
transform， transition， translate 这三长得实在太像，刚开始的时候总是迷迷糊糊，分不清它们的功能。
⽽最近新接⼊的项⽬以视觉效果为主，故也算是被动弄清基础含义。
先说结论，transform 与 transitions 是属性，如同 border、width ⼀样，我们可以⼿动设置其值以达到效果；translate 是 transform 的其中⼀个值，如同 auto 是 width 是其中的⼀个值⼀样。
⼀、transform 转变 这是⼀个静态的属性，如同 border ⼀样，设置之后⽴即改变，改变不需要时间参与。
它的作⽤是专注于改变元素基于默认位置的某些状态（如平移、缩放、旋转等），如下案例：.container:hover {/* transform: scale(2,2) */transform: translateY(50%)}.other {background-color: #333;}<div class="container"></div><div class="other"></div> 从上例中，我们可以看出，transform 是突变的，并且它转变之后并不挤压其他元素在⽂档流中的位置。
⾄于 transform 有哪些值，我们可以参看或者。
⼆、transition 过渡 相对于 transform，transition 则引⼊了时间概念，因此这不再是突变，⽽是当它所绑定的属性（⽐如width）发⽣改变的时候，会根据速度曲线慢慢变化。
如下例：.container {transition: height 1s;}.container:hover {height: 700px;}.other {background-color: #333;}<div class="container"></div><div class="other"></div> 从上⾯我们可以看出， transition 绑定的是元素某⼀个已经存在的属性值，这个属性值再某种状态下发⽣了变化，⽽ transition 专注于将这种改变添加个速度曲线，使得元素平滑转变，不显得很突兀。
css3 transition 语法
CSS3的transition属性用于在一定的时间间隔内平滑地改变元素的某个属性值。
它包括两个部分：要改变的属性名称和持续时间。
基本语法如下：
css复制代码
transition: property duration;
其中，property是要改变的属性名称，如background-color、font-size等；duration是过渡效果的持续时间，可以使用ms单位或s单位。
例如，以下代码将使元素的背景色在2秒内从红色变为蓝色：
css复制代码
transition: background-color 2s;
如果需要同时过渡多个属性，可以使用逗号分隔它们：
css复制代码
transition: background-color 2s, font-size 1.5s;
还可以指定过渡效果的类型，例如linear表示线性过渡，ease表示先慢后快再慢的过渡效果，ease-in表示先慢后快的过渡效果，ease-out表示先快后慢的过渡效果，ease-in-out表示先慢后快再慢的过渡效果。
例如：
css复制代码
transition: background-color 2s ease;
以上是CSS3 transition属性的基本语法，使用它可以实现平滑的动画效果。
css3transform属性详解
css3transform属性详解CSS3变形是⼀些效果的集合，⽐如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发⽣旋转、缩放、和平移等变化。
CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。
translate()函数接受CSS的标准度量单位；scale()函数接受⼀个0和1之间的⼗进制值；rotate()和skew()两个函数都接受⼀个径向的度量单位值deg。
除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。
CSS3变形中具有X /Y可⽤的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
（translateX(正的向右)，translateY（负的向上））2D transform常⽤的transform-function的功能:translate()：⽤来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。
在此基础上有两个扩展函数：translateX()和translateY()。
scale()：⽤来缩⼩或放⼤元素，可以使⽤元素尺⼨发⽣变化。
在此基础上有两个扩展函数：scaleX()和scaleY()。
rotate()：⽤来旋转元素。
skew()：⽤来让元素倾斜。
在此基础上有两个扩展函数：skewX()和skewY()。
matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。
3D transform常⽤的transform-function的功能:translate3d()：移元素元素，⽤来指定⼀个3D变形移动位移量translate()：指定3Ｄ位移在Ｚ轴的位移量。
scale3d()：⽤来缩放⼀个元素。
js中transition用法
js中transition用法transition是CSS3中的一个属性，用于指定元素的过渡效果。
通过transition属性，我们可以在元素发生改变时，使其以一种平滑的方式进行过渡，从而实现动画效果。
transition属性可以设置主要的四个参数：transition-property、transition-duration、transition-timing-function和transition-delay。
下面我们来详细介绍每一个参数的用法。
transition-property用于指定要过渡的CSS属性。
可以指定多个属性，以逗号分隔。
如果不指定该参数，默认会过渡所有可以过渡的属性。
例如：transition-property: width, height; 可以使得元素的宽度和高度发生变化时使用过渡效果。
transition-duration用于指定过渡效果所持续的时间。
可以使用秒(s)或毫秒(ms)来指定。
例如：transition-duration: 1s; 表示过渡效果持续1秒钟。
transition-timing-function用于指定过渡效果的速度曲线。
有很多种可选值，每一种都会产生不同的效果。
常用的有ease、linear、ease-in、ease-out等等。
例如：transition-timing-function: ease;可以使过渡效果以缓入缓出的方式进行。
transition-delay用于指定过渡效果延迟执行的时间。
可以使用秒(s)或毫秒(ms)来指定。
例如：transition-delay: 0.5s; 表示延迟0.5秒后执行过渡效果。
除了这四个主要的参数之外，我们还可以使用transition属性的简写形式来同时指定这四个参数。
例如：transition: width 1s ease 0.5s;表示元素的宽度在1秒钟内以缓入缓出的方式过渡，并且延迟0.5秒后执行过渡效果。
CSS3中的过渡、动画和变换
CSS3中的过渡、动画和变换⼀、过渡 过渡效果⼀般由浏览器直接改变元素的CSS属性实现。
a、transition属性 transition 属性是⼀个简写属性，⽤于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产⽣过渡效果。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6<style type="text/css">7 div{8 width: 100px;9 height: 100px;10 background: blue;11 transition: width 2s,background 3s,3S linear 3s;12 }13 div:hover{14 width: 300px;15 background: red;16 transition: width,background, 3s linear 2s;17 }18</style>19</head>20<body>21<div>2223</div>24</body>25</html> 可以设置设置某个属性的过渡持续时间（transition: width 2s,background 3s,3s linear 3s;），也可以设置所有的属性的过渡的持续时间（transition: width,background, 3s linear 2s）属性值和时间必须⽤逗号隔开; b、transition-property transition-property 属性规定应⽤过渡效果的 CSS 属性的名称。
利用CSS3的transition属性实现滑动效果
利⽤CSS3的transition属性实现滑动效果⾸先援引⼀下w3school上的transition基本知识：定义和⽤法transition 属性是⼀个简写属性，⽤于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产⽣过渡效果。
语法CSS Code复制内容到剪贴板1. transition: property duration timing-function delay;实现滑动效果只需要⼀个DIV元素便可实现滑动效果，避免了使⽤JavaScript为元素的动画（IE浏览器下仅⽀持IE9以上）HTML代码XML/HTML Code复制内容到剪贴板1. <div style="height: 200px; width: 200px; border: 1px solid #ccc;">2. <div class="slider" id="slider">这⾥是内容</div>3. </div>4. <button onclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button> CSS代码CSS Code复制内容到剪贴板1. .slider {2. overflow-y: hidden;3. max-height: 500px;4. /* 最⼤⾼度 */5. background: pink;6. height: 200px;7. width: 200px;8. /* Webkit内核浏览器：Safari and Chrome*/9. -webkit-transition-property: all;10. -webkit-transition-duration: .5s;11. -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);12. /* Mozilla内核浏览器：firefox3.5+*/13. -moz-transition-property: all;14. -moz-transition-duration: .5s;15. -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);16. /* Opera*/17. -o-transition-property: all;18. -o-transition-duration: .5s;19. -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);20. /* IE9*/21. -ms-transition-property: all;22. -ms-transition-duration: .5s;23. -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);24. }25. .slider.closed {26. max-height: 0;27. }。
css3——transition属性和opacity属性
css3——transition属性和opacity属性【transition-duration】是⼀个css3属性，规定完成过度效果需要花费的时间（⼀秒或毫秒计）。
语法：transition-duration: time;time ：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
默认值是 0，意味着不会有效果。
该属性其实是transition属性的⼀个⼦属性，下⾯总结⼀下css3中的transition属性：【transition】⽤于在⼀定的时间内平滑的过度，这种效果可以在⿏标单击，获取焦点，被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性的属性值。
从定义可以知道transition是⼀个⽤于动画过度的属性，然⽽transiton属性只不过是⼀个简写属性，⽤于设置四个过度属性，这四个过度属性分别是:transition-property (执⾏变换的属性 )transition-duration (变换延续时间)transition-timing-function (延续时间内，变换速率的变化)transition-delay (变换延迟时间)下⾯来分别介绍⼀下各个属性transition-property 即⽤来指定当元素其中⼀个属性改变是执⾏transition效果值:none(没有属性改变)，all(所有属性都改变)或指定某⼀元素(⽐如color，background等属性)。
transition-duration 是动画执⾏的时间，单位(s)⽐如"0.1s"也可以写成".1s"，它可以作⽤于任何元素，包括before和after伪元素。
transition-timing-function 动画的执⾏⽅式值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去⾃定义⼀个时间曲线)。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3中的Transition 属性详解W3C 标准中对CSS3的transition 这是样描述的:"CSS 的transition 允许CSS 的属性值在一定的时间区间内平滑地过渡。
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS 的属性值。
"下面我们从最简单的语法和属性值开始一步一步来学习transition 的具体使用：语法：1 2 3 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [,[<'transition-property'> ||<'transition-duration'> || <'transition-timing-function'> ||<'transition-delay'>]]*transition 主要包含四个属性值：执行变换的属性：transition-property ；变换延续的时间：transition- duration ；在延续时间段，变换的速率变化transition-timing-function ；变换延迟时间transition- delay 。
下面分别来看这四个属性值：一、transition-property ：语法：.transition-property ： none | all | [ <IDENT> ] [ ',' <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：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。
具体什么CSS属性可以实现transition效果，在W3C官网中列出了所有可以实现transition 效果的CSS属性值以及值的类型，大家可以点这里了解详情。
这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。
但上述表格所示的属性类型改变都会触发一个transition 动作效果。
二、transition-duration：语法：transition-duration ：<time> [, <time>]*transition-duration是用来指定元素转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。
其默认值是0，也就是变换时是即时的。
三、transition-timing-function：语法：1. transition-timing-function ：ease | linear | ease-in | ease-out | ease-in-out |2. cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in |3. ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*取值：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-duration ：<time> [, <time>]*transition-delay ：<time> [, <time>]*transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取值：<time>为数值，单位为s（秒），它的使用和transition-duration 极其相似，也可以作用于所有元素，包括:before和:after伪元素。
默认大小是"0″，也就是变换立即执行，没有延迟。
有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（"，"）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点：transition-delay 与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。
如：a {-moz-transition: background 0.5s ease-in,color 0.3s ease-out;-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;-o-transition: background 0.5s ease-in,color 0.3s ease-out;transition: background 0.5s ease-in,color 0.3s ease-out; }}如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：a {-moz-transition: all 0.5s ease-in;-webkit-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;transition: all 0.5s ease-in;}综合上述我们可以给transition一个速记法：transition: <property> <duration> <animation type><delay>示例代码：p {-webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s;-moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s;。