css3 transition等属性,持续更新...
2016-08-31 09:54
309 查看
1.transition属性:
参考网站:http://www.runoob.com/cssref/css3-pr-transition-timing-function.html
transition属性:
例子:
鼠标放在div上将逐渐在2s内该变宽度至300px;
transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timing-function,and
transition-delay。
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
默认值:all
0 ease 0
js语法:
object.style.transition = "width 2s";
例子:
当鼠标移在div上,1s延迟后,div向右以ease方式,在2s内,移动200px。
还有transition属性的分解写法:
transition-timing-function属性值:属性指定切换效果的速度;此属性允许一个过渡效果,以改变其持续时间的速度;默认值ease;
关于速度曲线,以及linear(匀速)、ease-in、ease-out等的用法见参考网站,上面有例子。
参考网站:http://www.runoob.com/cssref/css3-pr-transition-timing-function.html
transition属性:
例子:
div { width:100px; height:100px; background:red; transition:width ease 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; }
鼠标放在div上将逐渐在2s内该变宽度至300px;
transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timing-function,and
transition-delay。
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
默认值:all
0 ease 0
js语法:
object.style.transition = "width 2s";
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
div { width:100px; height:100px; background:red; transition:transform 1s ease 1s; -webkit-transition:transform 2s ease 1s; } div:hover { transform:translate(200px, 0px); }
当鼠标移在div上,1s延迟后,div向右以ease方式,在2s内,移动200px。
还有transition属性的分解写法:
<style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:2s; transition-delay:2s; transition-timing-function: ease; /* Safari/Chrome */ -webkit-transition-property:width; -webkit-transition-duration:2s; -webkit-transition-delay:2s; -webkit-transition-timing-function: ease; } div:hover { width:300px; } </style>
transition-timing-function属性值:属性指定切换效果的速度;此属性允许一个过渡效果,以改变其持续时间的速度;默认值ease;
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
相关文章推荐
- CSS3与动画有关的属性transition、animation、transform对比
- CSS3中的Transition属性详解
- 采用 clip 属性和 CSS3-transition 产生动态效果注意问题
- CSS3学习之分享下transition属性
- css3 的transition属性
- iOS开发常用的控件属性和注意事项(持续更新)
- CSS3属性transition
- CSS3 Button按钮欣赏(持续更新...)
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3 -webkit-transition(属性渐变)
- 不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;
- css3 transition属性详解(转)
- css3 transition属性实现3d动画效果
- 利用CSS3的transition属性模仿鼠标移入闪光灯效果
- 利用CSS3的transition属性实现滑动效果
- CSS3新属性transition-property transform box-shadow
- 一些简单而又不失个性的css3片段(持续更新)
- UILabel的一些不常用属性,持续更新
- css3内容持续更新ing
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...