transition基础和写法
属性名称
property
过渡时间duration和延迟时间delay
时间函数timing-function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画</title>
<style>
.box{
margin: 10px;
width: 100px;
height: 100px;
background-color: #0000ff;
}
.ex1{
transition:width 2s linear 1s;
}
.ex1:hover{
width: 260px;
}
.ex2{
transition:width 2s ease;
}
.ex2:hover{
width: 410px;
}
.ex3{
transition: transform 1s ease-out;
}
.ex3:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box ex1">
过渡时间和延迟时间
</div>
<div class="box ex2">
时间函数
</div>
<div class="box ex3">
旋转函数
</div>
</body>
</html>
网友评论