css3新特性transition,在css中transition表示
在css3中，通过transition属性可以实现一些简单的动画过渡效果~
1、语法
过渡：属性持续时间计时-功能延迟；过渡属性将元素设置为过渡效果，这是一个复合属性，包括四个缩写属性：
Transition-property:指定CSS属性的名称、过渡效果(默认值：all)
Transition-duration:过渡效果的持续时间(如果不指定默认值0，则不会有任何效果)。
过渡-计时-功能：指定过渡效果的旋转速度曲线(默认值：缓动)
过渡延迟：指定过渡延迟的开始时间(默认为0)。
注意：IE9及以下版本不支持该属性。safari3.1-6、IOS3.2-6.1和android2.1-4.3需要添加-webkit-前缀；而其他高版本浏览器支持标准书写。
！DOCTYPE html html head meta charset= utf-8 title/title style type= text/CSS 。tra { width:50px；高度：50px背景色：浅珊瑚色；/*复合属性*/transition:all 2 seas 0s；/*也可以采用以下子属性*/过渡持续时间：2s；过渡-属性：全部；过渡-计时-功能：轻松；过渡延迟：0s；} .tra:hover { width:200 px；}/style/head body div class= tra /div/body/html运行效果：
注意：使用转换复合属性时，每个属性由空格分隔，不能使用。
2、分属性
(1)过渡属性
Transition-property属性可以指定需要转换的css属性。默认值是all，这意味着所有属性都被转换(如果没有写入属性值，也意味着all)。如果为none，则任何属性都没有过渡效果。tra { width:50px；高度：50px背景色：浅珊瑚色；/*指定宽度属性transition */transition:width 2 seas 0s；}.tra:hover { width:200 px；高度：100px} div class=" tra "/div
仅指定了宽度属性转换，未指定高度属性。
注意：并不是所有的css属性都可以过渡，只有那些具有中间值的属性才能有过渡效果，比如display:block不能过渡到display:none。
(2)过渡期-持续时间
transition-duration属性可用于设置属性转换所需的时间，即属性从旧值转换到新值所需的时间(持续时间)。默认值为0s，如果不指定，则没有过渡效果。tra { width:50px；高度：50px显示：块；背景色：浅珊瑚色；/* transition-property此处省略，默认为all */*。指定的过渡时间为2s */transition:2s ease 0s；}.tra:hover { width:100px；高度：100px}
注意：
不能是负数，必须附有单位，单号无效。当该值为单值时，所有过渡属性对应相同的时间；当值为多值时，转换属性对应于持续时间。tra { width:50px；高度：50px显示：块；背景色：浅珊瑚色；过渡-属性：宽度、背景；过渡-计时-功能：轻松；过渡-持续时间：5s，2s；/*以上子属性等价于以下复合属性*/transition: width5Ease0，background2SEase0}.tra:hover { width:100px；背景色：蓝色；}
当值为多值时，转换属性按顺序对应于持续时间。
(3)过渡-计时-功能
Transition-timing-function属性指的是转场“缓动功能”，用于指定属性转场时的动画运动形式。这些值可以是关键字和贝塞尔曲线，默认值是ease。
关键词：线性易易入易出易入易出
贝塞尔：三次贝塞尔(n，n，n，n)；tra { width:50px；高度：50px显示：块；背景色：浅珊瑚色；/* transition-timing-function的默认值是easy */transition:1s linear easy easy-in easy-out easy-in-out ；}.tra:hover { border-radius:50%；背景色：蓝色；}缓：开始和结束慢，中间快。
线性：匀速
淡入：开始很慢，越来越快。
缓出：结尾很慢，越来越慢。
渐入渐出：先加速后减速，类似于渐入渐出，但比渐入渐出大。
如果随意调整三次贝塞尔(n，n，n，n)贝塞尔曲线中的四个值，会得到不同的效果。tra { width:50px；高度：50px显示：块；背景色：浅珊瑚色；过渡：1s三次贝塞尔曲线(. 75，2.03，0， 14)；}.tra:hover { border-radius:50%；背景色：蓝色；}
(4)过渡延迟
Transition-delay属性指定转换开始前的延迟时间。tra { width:50px；高度：50px显示：块；背景色：浅珊瑚色；/*转换仅在2s */transition之后开始：1s三次-贝塞尔(. 75，2.03，0， 14)2s；}.tra:hover { border-radius:50%；背景色：蓝色；}
3、结束语
最后解释并补充两点：
1.触发方式：转场属性不仅可以通过悬停触发，其他操作如【点击事件】【获得/失去焦点】【长按】都可以触发转场属性。
2.事件回调：transition属性只有一个事件，即transitionend事件，在transition事件完成后触发。
！DOCTYPE html html head meta charset= utf-8 title/title style # test { height:60px；宽度：60px背景色：浅粉色；过渡：宽度1.5s字体大小：12px} #测试：悬停{ width:250 px；}/style/headbody div id= test /div/body script//监听transitionend事件test . addevent listener( transition end ，我的函数)；//回调函数function my function(e){ e=e event；Test.innerHTML=转换结束，执行事件回调内容 } /script/html
关于css3中transition属性的详细解释，本文就到这里了。有关css3转换属性的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。