CSS3过渡
2015-10-15 16:22
357 查看
transition概述
CSS3的transition功能是使得css样式在发生改变的时候有一个平滑过渡的过程,从效果上看就是一段动画。transition属性包含4个子属性:
transition-property:待过渡的属性名称
transition-duration:过渡的周期时长(单位s/ms)
transition-timing-function:过渡函数(过程的速度变化)
transition-delay:过渡开启前的延迟时长(单位s/ms)
1、transition-property
基本上所有涉及颜色、大小(长度、百分比、数字)、位置的CSS属性都支持变换。transition-property的值也可以直接写成“all”,指代上述所有能支持变换的属性。2、transition-duration
过渡整个过程的执行时间,无需赘述。3、transition-timing-function
时间函数,即样式变化的动画执行方式,是由令人崩溃的贝塞尔曲线控制的。好在CSS3提供给我们几个可以直接使用并且常用的关键词:ease:由快到慢,逐渐减速(默认值)
linear:始终匀速
ease-in:始终加速(渐显效果)
ease-out:始终减速(渐隐效果)
ease-in-out:先加速后减速(渐显渐隐效果)
4、transition-delay
取值可以是:正整数:经过设定的时间后才启动过渡
负整数:立即启动过渡,之前的过渡动作被截断
0:不延迟,立即启动过渡(默认值)
CSS3过渡的触发
伪类触发::hover :active :focus :checked等媒体查询触发
JavaScript触发
书写方式
在书写transition属性的时候,可以把上述四个子属性写在一起用空格隔开;
另外transition本身是复合属性,它可以一次性声明多个待过渡的样式,以逗号分隔,
如:transition: background 1s linear 0s, color 1s ease 1s;
兼容性
IE9及其以下版本的浏览器不支持transition,其他的主流浏览器都能够完美支持。
transitio属性在实际运用中,需要添加各大主流浏览器的私有前缀:
-webkit-transition
-moz-transition
-o-transition
-ms-transition
注意事项
针对同一样式的transition属性书写的次数和位置时,有不同的执行方式:
例1:
.box{background: black;transition: background 2s ease 0s;}
.box:active{background: blue;}
执行效果:元素在点击激活事件触发后,其背景色从黑到蓝的过渡时间为2s,无延迟。
分析:当transition写在触发事件前的原始样式块内,那么定义的过渡方式则是以触发后的样式(上述例子中的:active背景色样式)为过渡终点。
例2:
.box{background: black;transition: background 2s ease 999999s;}
.box:active{background: blue;transition: background 2s ease 0s;}
执行效果:元素在点击激活事件触发后,其背景色从黑到蓝的过渡时间为2s,无延迟;鼠标松开后,背景色保持为蓝色,因为其过渡恢复的启动有999999s的延迟,网页的延迟时间没有上限从而相当于12天。因此,从效果上看好像是鼠标点击事件通过JS彻底改变了样式。
分析:当transition在触发事件前、后样式块内都书写时,那么各自定义的过渡方式都是以当前所在的样式为过渡终点,和上述例子的顺序相反!
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 如何使用CSS3画出一个叮当猫
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- 网页特效从下往上过渡 共享图库_最新图片
- CSS3中Transition属性详解以及示例分享
- jquery+CSS3模拟Path2.0动画菜单效果代码
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
- jquery和css3实现的炫酷时尚的菜单导航
- 实现音乐播放器的代码(html5+css3+jquery)
- 基于jquery css3实现点击动画弹出表单源码特效