一.定义
1.transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property--规定设置过渡效果的 CSS 属性的名称
- transition-duration--规定完成过渡效果需要多少秒或毫秒
- transition-timing-function--规定速度效果的速度曲线
- transition-delay--定义过渡效果何时开始
另外三个属性值无须过多解释,transition-timing-function的值如下所示:
2.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜(rotate()、scale()、translate()、skew())。
由此可见,transition是过渡属性;transform重在2D/3D转换。
二.用法
transition和transform结合,可以做出过渡转换效果。
如下:
<div class="outer">
<div class="inner">
<span>hello</span>
</div>
</div>
.outer {
width: 88px;
height: 88px;
line-height: 88px;
text-align: center;
border:1px solid #e5e5e5;
border-radius:50%;
padding:10px;
transition:transform 3s ease-out;
}
.inner {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #f9be57 10%,#fde65b 100%); /*渐变背景色*/
border-radius: 50%;
}
.inner span {color:#fff;}
.outer:hover {
transform: rotate(360deg);
transform: scale(2);
transform: translate(0,-10px);
transform: skew(45deg);
}