transition的意思为过渡,渐变。可以用来实现一些简单的动画效果。
transition:property duration timing-function delay;
四个参数分别表示:property(属性:包括宽,高,透明度等css属性),duration(持续时间),timing-function(速度曲线),delay(延迟)。
以下是一个div透明度从1到0的渐变过程。
<html>
<head>
<style>
div{
width:100px;
height:100px;
opacity:1;
background:blue;
transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
-moz-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
-webkit-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
-o-transition:opacity 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s;
}
div:hover{opacity:0;}
</style>
</head>
<body>
<div ></div>
</body>
</html>
transition是一个简写属性,用于设置过4个过渡属性。
- transition-property:none|all|property 过滤效果的css属性
- transition-duration:time 完成过渡效果所费时间
- transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 速度曲线
- transition-delay:time 定义过渡何时开始
transition-timing-function:linear(匀速),ease:慢,快,慢,ease-in:慢开始,ease-out:慢结束,ease-in-out:慢开始和结束,cubic-bezuer(n,n,n,n),自定义贝塞尔曲线。