关闭

css3 transition等属性,持续更新...

192人阅读 评论(0) 收藏 举报
分类:

1.transition属性:

参考网站: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 之间的数值。
关于速度曲线,以及linear(匀速)、ease-in、ease-out等的用法见参考网站,上面有例子。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:145643次
    • 积分:1864
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:37篇
    • 译文:0篇
    • 评论:13条
    最新评论