CSS属性参考 |
您所在的位置：网站首页 › transition参数 › CSS属性参考 |
CSS属性参考
当前位置：主页 > 资料库 > 前端教程 > CSS属性参考 | transition
CSS属性参考 | transition
2016-08-15
次
标签
过渡动画
css教程
css属性
CSS transition 属性用于指定元素过渡动画效果。它是transition-property、transition-duration、transition-timing-function和transition-delay的简写属性。 transition属性用于为元素的动画制作平滑过渡的效果。它可以使元素在两种状态之间的平滑过渡。不同状态可以用:hover 、:active之类的伪元素来定义，或者使用JavaScript动态设置。 transition属性中各个具体过渡动画属性的书写顺序不是随意的，必须按照以下顺序来书写：动画属性 > 动画持续时间 > 动画的速度曲线 > 动画的延迟时间。在transition属性中出现的第一个时间会被解析为transition-duration，如果有第二个时间出现，它会被解析为transition-delay。 你可以在同一个transition声明中指定多个transition属性，使用逗号来进行分隔。例如： /* 单一transition */ transition: background-color .3s linear; /* 多个transitions */ transition: color .6s ease, font-size .3s linear; transition: background-color 1s linear, left .6s ease-out 1s, transform 1s steps(3, start);如果你在transition声明中指定了多个transition属性，其中一个没有指定transition-property属性，那么该transition声明无效。 注意不是所有的CSS属性都可以执行动画效果的，具体的可以参考W3C的Animation of property types & Animatable properties。 官方语法 transition: [ ',' ]* 其中 = [ none | ] || || ||参数： ：一个或多个动画过渡声明，使用逗号来进行分隔。每个动画过渡声明由各个具体的动画过渡属性组成。transition属性的初始值为none 0s ease 0s;。它们是各个具体过渡动画属性的初始值。 应用范围transition属性可以应用所有元素，以及:before和:after伪元素上。 示例代码 /* 动画属性名称 | 持续时间 */ transition: margin-left 4s; /* property 动画属性名称 | 持续时间 | 延迟时间 */ transition: margin-left 4s 1s; /* 动画属性名称 | 持续时间 | 速度曲线 | 延迟时间 */ transition: margin-left 4s ease-in-out 1s; /* 2个transition属性 */ transition: margin-left 4s, color 1s; /* 为元素的所有变化使用过渡动画效果 */ transition: all 0.5s ease-out; 在线演示下面的例子演示了使用transition过渡动画和没有使用transition过渡动画的效果。 1 2 浏览器支持CSS3 transition属性的浏览器兼容性列表如下：
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/transition.html |
【本文地址】