:hover伪类选择器可以用于所有的选择器(只有在悬停时，执行选择器的属性)
CSS3中新增过渡模块：transition ?property（属性）duration（过渡效果花费的时间）timing-function（过渡效果的时间曲线）delay（过渡效果何时开始）简写：transition：过渡属性 过渡时长 过渡速度 过渡延迟 （！！如果有多组属性要改变则直接用逗号隔开写几组即可）如果有的属性相同则例：all 5s表示都是5s完成
三要素：必须属性发生变化 必须告诉系统哪个属性变化 必须告诉系统变化时长
要实现多个属性变化效果，用逗号隔开
在设计过渡效果时：1：不管过渡，先编写基本界面
?????????????????2：修改我们需要修改的属性
?????????????????3：给我们认为需要修改的属性元素添加过渡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>过渡模块</title> 6 ????<style> 7 ????????*{ 8 ????????????padding: 0; 9 ????????????margin: 0;10 ????????}11 ????????div{12 ????????????background-color: red;13 ????????????width: 100px;14 ????????????height: 50px;15 ????????????/*告诉系统那个属性需要执行过渡效果*/16 ????????????transition-property: width,background-color;17 ????????????/*告诉系统过渡效果持续的时长*/18 ????????????transition-duration: 3s,3s;19 ????????????/*告诉系统延迟多少秒再发生变化*/20 ????????????transition-delay: 1s,1s;21 ????????}22 ????????div:hover{23 ????????????width: 300px;24 ????????????background-color: #5bc0de;25 ????????}26 ????????ul{27 ????????????list-style: none;28 ????????????width: 500px;29 ????????????height: 100px;30 ????????????background-color: yellow;31 ????????}32 ????????li{33 ????????????width: 50px;34 ????????????height: 20px;35 ????????????background-color: red;36 ????????????transition-property: width,background-color;37 ????????????transition-duration: 3s,3s;38 ????????}39 ????????ul:hover li{40 ????????????width: 500px;41 ????????????background-color: #5bc0de;42 ????????}43 ????????.box1{44 ????????????transition-timing-function: ease;45 ????????}46 ????????.box2{47 ????????????transition-timing-function: ease-in;48 ????????}49 ????????.box3{50 ????????????transition-timing-function: ease-out;51 ????????}52 ????????.box4{53 ????????????transition-timing-function: ease-in-out;54 ?????????}55 ????????.box5{56 ????????????transition-timing-function: linear;57 ??????????}58 59 60 ????</style>61 </head>62 <body>63 64 <div></div>65 <br>66 <ul>67 ????<li class="box1">box1</li>68 ????<li class="box2">box2</li>69 ????<li class="box3">box3</li>70 ????<li class="box4">box4</li>71 ????<li class="box5">box5</li>72 </ul>73 </body>74 </html>CSS动画之过渡模块
原文地址：https://www.cnblogs.com/myErebos/p/8586402.html