CSS3 transition 属性

转载 2015年07月08日 21:45:44

实例

把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

默认值: all 0 ease 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.transition="width 2s"

语法

transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

【CSS基础】css3 transition过渡属性<四>

transition 过渡,顾名思义就是说一种变化是循序渐进的走过去,而不是瞬间变化(博主的烂理解)。 请查看mdn的解释: transition实际上 transition 是 简写,它包含4个属...
  • a5534789
  • a5534789
  • 2016年12月01日 00:37
  • 1014

-webkit-transition--谷歌浏览器可以使用的css3属性

#block{ width:400px; height:400px; background-color:#69c; margin:0 auto; -webkit-transition:bac...
  • wxj_snow
  • wxj_snow
  • 2014年10月21日 14:46
  • 3731

【CSS3】动画--过渡属性 transition-property

动画--过渡属性 transition-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transit...
  • happyhaojie
  • happyhaojie
  • 2016年02月24日 18:55
  • 766

css3动画属性--transition(转换)

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。 语法: transition : [ || || || [, [ || || || ]]* transit...
  • tyler1108
  • tyler1108
  • 2015年03月24日 18:15
  • 2591

CSS3中Transition属性详解以及示例分享

1、transition-property的语法 [css] transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变...
  • l863784757
  • l863784757
  • 2015年06月10日 14:01
  • 961

CSS3 transition属性和Hover效果

w3cschool上其实有很详细的基本属性内容: transition:【属性】【变换延续的时间 】【速率】 属性怎么理解…假如有一个div宽度是200px ....
  • GrahamACER
  • GrahamACER
  • 2016年09月14日 21:52
  • 975

CSS3 transition详解

D3 Transitions 简介: Css 的transition属性可以使CSS的值在一段时间内平滑的变化。 Transition: 一般情况下,当CSS值发生变化时,其渲染结果会立刻发生变化。而...
  • yhn1121
  • yhn1121
  • 2016年07月25日 16:17
  • 599

CSS3属性transition(过渡)详解

transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。 ...
  • github_36758028
  • github_36758028
  • 2016年11月21日 11:32
  • 2776

CSS3中transform属性和transition属性

学习了CSS3之后觉得比JQuery更方便点。做点记录。以便复习。
  • Fly_TheWind
  • Fly_TheWind
  • 2016年04月13日 18:50
  • 3747

CSS3 transition 属性 translate3d rotate

transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safar...
  • blogscsdn
  • blogscsdn
  • 2016年08月17日 10:25
  • 1271
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 transition 属性
举报原因:
原因补充:

(最多只允许输入30个字)