transition过渡的基本使用
1.简介
transition属性是css3中的一个重要属性,transition可以为一个元素在不同样式之间变化添加补间动画。我们只需要定义开始状态和结束状态,这样transition属性就可以为我们添加补间动画。相较于传统的js实现的动画,transition属性实现的动画效果更细腻而且内存开销小。
2.transition属性的基本使用
transition属性有4个基本要素,分别是要过度的属性,动画时长,动画演变速度,延迟时间。
3.哪些属性可以参与过渡
(1)所有数值属性都可以参与过度,比如width,height,left,top,border-radius
(2)背景颜色和文字颜色都可以过渡
(3)所有变形(包括2D和3D变换)都可以过渡
4.代码演示
(1)盒子宽度过渡
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 40px;
width: 200px;
height: 200px;
background-color: orange;
transition: width 1s linear 0s;
}
.box1:hover {
width: 800px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
(2)位置过渡
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 p {
margin: 20px;
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 0px;
}
.box1:hover p {
left: 600px;
transition: left 5s linear 0s;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
</div>
</body>
</html>
(3)盒子颜色变化
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: orange;
}
.box1:hover {
transition: background-color 5s linear 0s;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
(4)2D旋转过渡
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 100px;
width: 200px;
height: 200px;
background-color: orange;
}
.box1:hover {
transition: transform 2s linear 0s;
transform: scale(1.2) rotate(360deg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5.特殊用法
如果要所有属性都参与过渡,可以写all。例如:transition:all 1s linear 0s;
CSDN-Ada助手: 推荐 云原生入门 技能树:https://edu.csdn.net/skill/cloud_native?utm_source=AI_act_cloud_native
长不大的小菜鸡: 需要前端学习资源的小伙伴可以私信我哟
不正经的kimol君: 666,反手就是一个赞,欢迎回赞哦~