<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡</title>
<style>
/* transition 简写 设置四个过渡属性。
transition-property 过渡的属性的名称。
transition-duration 过渡效果的时间。默认为 0。
transition-timing-function 过渡效果的时间曲线。默认 "ease"。
transition-delay 过渡效果开始时间。默认 0。 */
.box {
width: 500px;
height: 500px;
box-shadow: 0 0 0 2px #222;
}
.box .item {
width: 100px;
height: 100px;
/* transition-property: width,background-color; 过渡属性*/
transition-property: all;
/* transition-duration: 100ms,2000ms; 过渡持续时间*/
/* transition-duration: 100ms,2000ms; */
transition-duration: 5s;
/* transition: width 2s linear,height 3s ease-in 2s; */
}
.box .item:nth-of-type(1) {
background-color: #f00;
transition-timing-function: ease;
/* 过渡速度 */
}
.box .item:nth-of-type(2) {
background-color: #0f0;
transition-timing-function: ease-in;
}
.box .item:nth-of-type(3) {
background-color: #00f;
transition-timing-function: ease-out;
}
.box .item:nth-of-type(4) {
background-color: #fd0;
transition-timing-function: ease-in-out;
}
.box .item:nth-of-type(5) {
background-color: #f0d;
transition-timing-function: linear;
}
.box .item:nth-of-type(6) {
background-color: pink;
transition-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.9);
transition-delay: 5s;
/* 过度延迟 */
}
.box:hover .item {
width: 500px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">ease</div>
<div class="item">ease-in</div>
<div class="item">ease-out</div>
<div class="item">ease-in-out</div>
<div class="item">linear</div>
<div class="item">cubic-bezier</div>
</div>
</body>
</html>