transform
呈现的是一种变形结果,而Transation
呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition
和transform
是两种不同的动画模型。
1. transition过渡属性
transition
属性是一个简写属性,用于设置四个过渡属性:
语法
transition: property duration timing-function delay;
值描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。
transition-delay
定义过渡效果何时开始。
all
:表示针对所有元素。
none
:表示没有元素。
ident
:指定CSS属性列表
注:请始终设置 transition-duration
属性,否则时长为 0,就不会产生过渡效果。transition
可以和transform
同时使用。
transition:<过渡属性名称> <过渡时间> <过渡模式>
transition-timing-function
的五种取值:
1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始(加速)
4.ease-out 缓慢结束(减速)
5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)
6.cubic-bezier 贝塞尔曲线(matthewlein.com/ceaser)
过渡模式比如宽过渡,高过渡和all过渡
看一个实例:
<style type="text/css">
.trans1{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans2{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:350px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:height;
-moz-transition-property:height;
position:absolute;
left:780px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans1:hover{
width:300px;
height:300px;
}
.trans2:hover{
width:400px;
}
.trans3:hover{
height:500px;
}
</style>
<body>
<div class="trans1">变换所有的属性</div>
<div class="trans2">只变换宽度属性</div>
<div class="trans3">只变换高度属性</div>
</body>
点击下方result查看demo:
http://jsfiddle.net/px0v52jn/