css3 动画过渡效果：手把手教你Css3实现过渡动画
css3 动画过渡效果：手把手教你Css3实现过渡动画transition-duration需要过渡的属性名属性描述transition-property
简介今天教一下大家用Css3实现网页开发中常用的过渡动画效果
核心知识Css3实现过渡动画的核心样式属性是transition，然后再配合常用的2D或3D转换，例如：rotate、scale、skew、translate3d等就可以实现我们业务开发中常用到的动画效果
transition是用来指定需要过渡的属性名、过渡时间、过渡效果曲线及过渡延时时间
下表列出了所有的过渡属性:
|
属性 |
描述 |
|
transition-property |
需要过渡的属性名 |
|
transition-duration |
过渡时间，默认是 0 |
|
transition-timing-function |
过渡效果曲线，默认是 "ease" |
|
transition-delay |
过渡延时时间，默认是 0 |
// 各个属性单独设置
div {
transition-property: scale; // 过度效果只影响宽度
transition-duration: 1s; // 持续时间1秒
transition-timing-function: linear; // 匀速动画
transition-delay: 2s; // 动画延时2秒执行
}
// 一次性设置，效果和上面的一样
// 实际开发中一般都一次性设置
div {
transition:width 1s scale 2s;
}实际案例
1、鼠标移上去等比放大
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// transform变换时，0.3秒动画
transition: transform 0.3s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// scale等比宽度和高度等比放大1.2倍
transform: scale(1.2 1.2);
}
效果
2、鼠标移上去旋转360度
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// transform变换时，1秒动画
transition: transform 1s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// rotate旋转360度
transform: rotate(360deg);
}
效果
3、鼠标移上去向右下方移动
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// transform变换时，1秒动画
transition: transform 1s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// translate向右移动50px，向下移动30px
transform: translate(50px 30px);
}
效果
4、鼠标移上去x方向变形30度，y方向变形20度
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// transform变换时，1秒动画
transition: transform 1s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// translatex变换方向变形30度，y方向变形20度
transform: skew(30deg 20deg);
}
效果
5、3D动画旋转这里只举例了rotateY
还有其它的3D动画包括translate3d(x y z)、scale3d(x y z)、rotate3d(x y z angle)，大家也可以根据我这个例子，举一反三
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// transform变换时，1秒动画
transition: transform 1s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// translate 沿Y方向转360度
transform: rotateY(360deg);
}
效果
6、其它变换过渡
css的很多属性都可以过渡变换的，这里举例width，其它的比例color、高度、top等都适应
<div class="demo"></div>
.demo {
width: 100px;
height: 100px;
background-color: blueviolet;
// 宽度变换时，1秒动画
transition: width 1s;
cursor: pointer;
}
.demo:hover {
// 鼠标移动上去的时候
// 宽度变200px
width: 200px;
}
效果
好了，开发当中基本上能用到的过渡效果都在上面了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
