工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-、 -webkit-、 -o-
1、transform
rotate表示顺时针旋转的角度,负数表示逆时针旋转的方向,单位deg
{
transform: rotate(30deg);
}
scale表示延x轴和y轴放大的或缩小的倍数,默认是1,无单位
{
transform: scale(x);
transform: scale(x,y);
}
translate表示延x轴和y轴平移的距离,带px单位
{
transform:translate(20px,20px);
}
2、transition
transition:perperty duration timing-function delay
多个属性可以用,分隔
perperty:css属性|all。
duration 默认值0。
timing-function
- ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
- linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
- ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
- ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
- ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
{
transition:opacity 1s ease-in, width 2s ease-out;
}
3、animation
animation:NAME duration timing-function delay 用法同transition
@keyframes 是动画的一个生命周期,记录每帧的属性改变效果
.div{
animation:NAME 1s ease-in
}
@keyframes NAME {
0% {
}
20% {
}
...
100% {
}
}
案例 fade-in动画
.fade-in:hover{
animation: fade-in 1s ease-in;
}
@keyframes fade-in {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity:1;
}
}
<div class="box">
</div>