HTML CSS 过渡效果
1、transition
过渡(transition): 通过过渡可以指定一个元素的属性在发生变化时的切换方式,从而创建一些非常好的效果,提升用户的体验。如:
transition: height 2s; /*当元素的高度放生变化时,需要花费两秒钟的时间来进行过渡。*/
这种方式可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个表示延迟时间。
transition: 2s margin-left 1s; /*表示当元素的margin-left属性值发生变化时,延迟1秒后,开始过渡,持续时间为2秒*/
2、另外一种设置的方式:
transition-property: 指定要执行过渡的属性,如:transition-property: width, height。
可以同时指定宽度和高度,多个属性之间使用逗号进行隔开,如果所有的属性都需要过渡,则可以使用 all 关键字,大部分的属性都支持过渡效果(基本上可计算的读可以设置),注意的是过渡是必须从一个有效值向另外一个有效值进行过渡,如auto就不是一个有效值,即它的值是不确定的;
transition-duration: 指定过渡效果的持续时间,如:transition-duration: 2s;指定持续时间为2秒。
时间单位:s和ms,1s = 1000ms,也可以为transition-property的多个属性之间分别设置不同的过渡时间,通过transition-duration属性指定多个值,中间使用逗号隔开,这里多个值之间的顺序和transition-property指定的属性之间一一对应;
transition-timing-function: 指定过渡的时序函数,即过渡的执行方式,可选值如下:
- ease,默认值,慢速开始,先加速,后减速;
- linear,匀速运动;
- ease-in,加速运动;
- ease-out,减速运动;
- ease-in-out,先加速,后减速;
- cubic-bezier(),来指定时序函数,如:transition-timing-function: cubic-bezier(0,0,1,1);其中的值可以在https://cubic-bezier.com/网址中进行获取;
- steps(),分步执行过渡效果;如transition-timing-function: steps(2);分两步来执行过渡效果,在steps函数中可以指定两个值,第一个指定的是过渡的步数,第二个指定是在某个时间之前还是之后执行,可选值:start、end(默认值)。如:steps(2, start)可以理解为在第一秒开始之前走第一步,在第二秒开始之前走第二步;
transition-delay: 过渡效果的延迟,即等待多长一段时间之后开始执行过渡效果。如:transition-delay: 2s;表示等待2秒钟之后开始执行过渡效果;
练习代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100%;
height: 500px;
background-color: silver;
}
.box1 div{
width: 100px;
height: 100px;
}
.box2{
background-color: #bfa;
margin-bottom: 100px;
/* transition: all 2s; */
/* transition-property: width, height; */
margin-left: 0;
/* transition-duration: 2s; */
/* transition-timing-function: steps(2, end); */
/* transition-delay: 2s; */
transition: 2s margin-left 1s;
}
.box3{
margin-left: 0;
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
.box1:hover .box2,
.box1:hover .box3{
margin-left: 1266px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>