css3-过渡效果transition
2019-08-26 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
/*添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态*/
/*1.transition-property:添加过渡效果的样式属性名称*/
transition-property: left;
/*2.transition-duration:过渡效果的耗时 以秒做为单位*/
transition-duration: 2s;
/*3.transition-timing-function:设置时间函数--控制运动的速度*/
transition-timing-function: linear;
/*4.transition-delay:过渡效果的延迟*/
transition-delay: 2s;
/*简写：transition:属性名称 过渡时间 时间函数 延迟*/
transition: left 2s linear 0s;
/*为多个样式同时添加过渡效果*/
transition: left 2s linear 0s,background-color 5s linear 0s;
/*为所有样式添加过渡效果 all:所有样式
1.所有样式的过渡效果一样
2.效率低下，它会去查询所有添加的样式
3.建议：以后不要这么写
4.steps(4):可以让过渡效果分为指定的几次来完成*/
transition:all 2s steps(4);
-moz-transition: all 2s steps(4);
-webkit-transition: all 2s steps(4);
-o-transition: all 2s steps(4);
}
/*单击*/
div:active{
left: 1000px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
