css3动画属性中的transition属性
一、语法
transition: property duration timing-function delay;
值 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
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动作效果。
二、浏览器兼容性
IE10以后支持
demo:点击按钮的时候,导航会收起。此时宽度发生变化,通过css3的transition属性,给他一个过渡效果。
三、代码
左侧栏和内容区都需要设置动画,动画时间要一致,这样不会造成因时间不一致而闪动
css3动画属性中的transition属性的更多相关文章
- 今天我们来讨论一下CSS3属性中的transition属性;
transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- css3学习--css3动画详解一(animation属性)
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- ADOquery属性中cursortype,LockType属性
ADOquery属性中cursortype属性 ctOpenForwardOnly 向前移动 - — 除了只能在记录集中向前移动以外,其它的和动态游标类似. ctKeyset 键集 ...
- CSS3学习之分享下transition属性
最近在网上看到很多transition写的效果,借鉴http://www.w3school.com.cn分享下代码, 1.语法:transition: property duration timing ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
随机推荐
- PHP开发搜索引擎技术全解析
谈到网页搜索引擎时,很多人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google这家由斯坦福大学学生创 ...
- Windows平台下的session0创建进程的问题与解决办法
很多博客都有记载如何在session0下创建进程的办法,也就是使用CreateProcessAsUser.但是这个要求服务的进程有SE_INCREASE_QUOTA_NAME和SE_ASSIGNPRI ...
- android系统平台显示驱动开发简要:LCD驱动调试篇『四』
平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...
- ListView中使用type需要注意的东西 java.lang.ArrayIndexOutOfBoundsException: length=2; index=2 addScrapView
ListView中使用type需要注意的东西 在使用ListView时,如果使用了getItemViewType, 记得他的值一定要是从0开始计数的. 且要覆盖getViewTypeCount方法.并 ...
- Innodb引擎 long semaphore waits
上一篇介绍了因为子表过多,导致innodb crash的情况,但crash的原因是long semaphore waits.long semaphore waits又为何物? 背景:Innodb使用了 ...
- poj1226,poj3080
看来以后用pascal的函数要小心了: 简简单单pos其实时间复杂度是二次方级的…… 今天学习的是KMP——字符匹配算法: 这两道题也都很简单,都是为这个算法练手的, 最朴素的匹配显然是穷举起始位置然 ...
- 【jQuery】
TryjQuery:jQuery官方推出的教学视频http://blog.jobbole.com/37699/ jQuery 1.11 / 2.1 beta 版发布,全面支持异步模块加载 √http ...
- centos nginx 多端口配置过程记录
1. 编辑 /usr/local/nginx/vhosts/ 在此目录下增加一文件,如;ci.ainux.com,或复制一个文件 修改其中的端口和目录,更改log_format 名称 重启nginx ...
- apache开源项目--OpenMeetings
OpenMeetings是一个多语言可定制的视频会议和协作系统.它支持音频.视频,能让你查看每个与会者的桌面.OpenMeetings还包含一个白板,通过白板可以导入各种格式的图片和涂鸦. 在线演示: ...
- class属性添加多个类
<html> <head> <style type="text/css"> h1.intro { color:blue; text-align: ...