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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
(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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
(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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
(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;
<span class="token punctuation">}</span> <span class="token selector">.box1:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">transition</span><span class="token punctuation">:</span> transform 2s linear 0s<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</head>
<body>
<div class=“box1”></div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
5.特殊用法
如果要所有属性都参与过渡,可以写all。例如:transition:all 1s linear 0s;
</article>