css3动画属性中的transition属性
2016-01-12 09:25
726 查看
一、语法
transition: property duration timing-function delay;
值 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
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动作效果。
二、浏览器兼容性
IE10以后支持
demo:点击按钮的时候,导航会收起。此时宽度发生变化,通过css3的transition属性,给他一个过渡效果。
三、代码
左侧栏和内容区都需要设置动画,动画时间要一致,这样不会造成因时间不一致而闪动
相关文章推荐
- HTML+CSS
- 去掉或者修改 input、select 等表单的【默认样式 】
- 【HTML/XML 5】使用XSL给XML文档添加样式
- 【HTML/XML 5】使用XSL给XML文档添加样式
- WPF样式
- 编写可维护的css
- modal 控制器的样式
- CSS + Div 学习总结
- CSS元素分类
- 自定义上传按钮样式的终极解决方案_input透明法
- 问题与对策:CSS的margin塌陷(collapse)
- CSS里的单位介绍
- CSS的margin属性实例
- CSS学习笔记——定位position属性的学习
- Ionic基础——CSS布局
- 类似时间轴的样式
- css笔记重点
- CSS样式随笔总结
- QT设置ToolButton按钮的样式
- CSS入门