css3 的过渡效果transition最少需要设置哪两个属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 的过渡效果transition最少需要设置哪两个属性相关的知识,希望对你有一定的参考价值。
transition:2s;其实只需加个秒数就行。还可以加个运动类型:
运动类型:
ease 平滑过渡(缓冲)
ease-in 由慢到快(加速)
ease-out 由快到慢(减速)
ease-in-out 由慢到快再到慢(先加后减)
如:transition:ease 2s; 参考技术A http://www.cnblogs.com/ruanxh123/p/5639054.html 参考技术B http://www.cnblogs.com/ruanxh123/p/5639054.html
transition初体验
transition的作用可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方。
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
以上是transition的四个属性。
使用语法
transition: property duration timing-function delay;
举一个例子:使用所有的过渡属性
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s;/* Opera */-o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }
该例子可写成简写的 transition 属性:
div { transition: width 1s linear 2s; -moz-transition:width 1s linear 2s; /* Firefox 4 */ -webkit-transition:width 1s linear 2s; /* Safari and Chrome */ -o-transition:width 1s linear 2s; /* Opera */ }
[注意]transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。
以上是关于css3 的过渡效果transition最少需要设置哪两个属性的主要内容,如果未能解决你的问题,请参考以下文章