Transition is more commonly used. Transition is an attribute: when transition is
fully defined, there are 4 parameters
transition: all 2s 3s (transition delay) linear (transition method, usually defaults)
actually use two parameters.
Transition realization:
(1) must be satisfied The two states
(2) must be able to trigger the switching of the two states
. (a) Hover is only a way to trigger the state switching (used in this semester)
. (b) It can be triggered by JS code (to be learned in the next semester)
Not all attributes can be transitioned (but, when used as can be transitioned-the use of all) do not remember what can be transitioned, what can not be.
Anything that can be represented digitally can be transitioned.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition属性实现过渡</title>
<style>
.box{
width:200px;
height:200px;
background-color:pink;
transition:width 2s;/*宽度的缓动效果：2秒过渡完*/
/*transition:height 3s;两个不能这样写，后面的会覆盖前面的*/
transition:width 2s,height 3s,background-color 2s;/*这样才是对的，用逗号分隔开*/
/*文字居中*/
text-align:center;
line-height:200px;
font-size:24px;
color:#69F;
transition:all 2s;/*时间一样的话，这样写更好*/
}
.box:hover{
/*鼠标放上去后切换*/
width:600px;
height:400px;
text-align:center;
line-height:400px;
color:#6FC;
background-color:#F96;
border-radius:50%;
}
</style>
</head>
<body>
<div class="box">过渡效果演示</div>
</body>
</html>