过渡动画
- 过渡三要素
1.必须要有属性发生变化
2.告诉系统哪个属性需要执行过渡效果
3.必须知道过渡效果持续时长
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 50px;
background-color: red;
/*告诉系统哪个属性需要执行过渡效果*/
/*transition-property: width;*/
/*多个属性执行动画效果*/
transition-property: width, background-color;
/*过渡效果持续时长*/
/*transition-duration: 3s;*/
transition-duration: 3s, 10s;
/*连写*/
/*transition: width 5s linear 2s;*/
}
div:hover{
width: 200px;
background-color: green;
}
</style>
<body>
<div></div>
</body>
注：当多个属性需要动画效果时，用","隔开
transition-property: 需要过渡动画的属性
transition-duration: 过渡效果持续时长（秒）
transition-delay: 延迟开始过渡动画（秒）
transition-timing-function: 控制过渡动画的运动速度（linear/ease/ease-in/ease-out/ease-in-out）
过渡动画的运动速度示例：
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
background-color: darkolivegreen;
list-style: none;
border: 1px solid #000;
}
li{
width: 100px;
height: 50px;
margin-top: 50px;
background-color: khaki;
transition-property: margin-left;
transition-duration: 10s;
}
/*鼠标悬停ul li标签移到右侧*/
ul:hover li{
margin-left: 700px;
}
/*控制过渡动画的运动速度*/
ul li:nth-child(1){
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}
</style>
<ul>
<li>linear</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
过渡效果连写格式：
transition: property duration timing-function delay
transition: 过渡属性 过渡时长 过渡速度 过渡延迟
transition: width 5s linear 2s,background-color 2s linear 0s;
所有属性相同的过渡效果：transition:all 5s;
- 弹性效果练习
编写过渡顺序：
1.1 不要管过渡，先编写基本界面
1.2 修改认为需要修改的属性
1.3 再回过头去给被修改属性的那个元素添加过渡效果即可
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
background-color: lemonchiffon;
margin-top: 100px;
text-align: center;
line-height: 100px;
padding-top: 10px;
}
div span{
font-size: 80px;
transition: margin 5s;
}
div:hover span{
margin: 0 50px;
}
</style>
<div>
<span>嗯</span>
<span>你</span>
<span>是</span>
<span>猪</span>
<span>吗</span>
</div>
- 手风琴效果练习
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 291px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 291px;
background-color: seagreen;
float: left;
transition: width 2s;
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
}
</style>
<body>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
</body>
