CSS3 动画—transition
CSS3 过渡属性被封装在 transition 规范中,过渡的意义在于,给了 CSS 时间轴的概念,在此之前所有的 CSS 状态变化都是瞬间完成的。过渡可以视为简单版的动画,通过定义开始状态和结束状态,达到样式转变的功能。
目前各大浏览器都支持 transition,所以不加浏览器前缀即可使用。
CSS3 transition 规范定义了以下四个 CSS 属性:
transition-delay(过渡延迟时间) transition-duration(过渡持续时间) transition-property(过渡属性) transition-timing-function(过渡效果的时间曲线)
/* transition: 1s 1s width ease; */
transition-property: width;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
过渡属性 transition-property
默认值为 all,表示浏览器所有能接受的可过渡属性,可以使用单个值或以逗号隔开的多个值。
transition-property: width,height;
transition-duration: 1s,2s;
/* transition: 1s width, 2s height; */
/* transition: width 1s, height 2s; */
可以在 这里 和 这里 查看哪些 CSS 属性支持 transition。
延迟时间 transition-delay
transition-delay 属性规定了在执行一个过渡之前的等待时间。IE 和 Opera 不接受 transition-duration 在-10ms和10ms之间的值。默认值0表示不过渡直接看到执行后的结果。单位是秒s,也可以是毫秒ms。
transition-delay: 1s;
transition-delay: 1000ms;
过渡时间 transition-duration
动画的执行时间,默认值0表示不过渡。单位是秒s,也可以是毫秒ms。
transition-duration: 1s;
transition-duration: 1000ms;
过渡效果 transition-timing-function
ease:默认值,缓解效果,变化速度逐渐放慢 linear:线性效果,匀速变化 ease-in:渐显效果,加速变化 ease-out:渐隐效果,减速变化 ease-in-out:渐显渐隐效果 cubic-bezier: 自定义变化速度,可以使用 cubic-bezier 定制想要的效果。
transition: width cubic-bezier(.14,.78,.92,.36) 1s;
transition
transition 是一个复合属性,可以同时定义 transition-property、transition-duration、transition-timing-function、transition-delay 子属性值。
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration */
transition: margin-left 4s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Apply to multiple properties */
transition: width 2s, height 2s, background-color 2s, transform 2s;
写复合属性的时候,四个属性是可以改变顺序的,不过两个时间属性若同时出现,第一个代表 duration,第二个代表 delay,如果只出现一个时间属性,则表示 duration。
transition 结合 transform
使用 transition 结合 transform 能够完成一些简单的动画效果
使用 transition 做动画简单易用,不过也存在一些缺点:
(1) 动画需要事件触发 (2) 动画只能执行一次 (3) transition 只能定义开始状态和结束状态,不能定义中间状态
因此如果想要完成比较复杂的动画,还是要用 css3 中的 animation 属性。
参考资料
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十