设置哪些属性要参与到过渡动画中
transition-property: none|all|property;
none:没有属性会参与到过渡动画中
all:所有属性都会参与到过渡动画中
property:指定的属性会参与到过渡动画中。如指定宽和高参与到过渡动画中:transition-property: width, height;。
设置过渡动画的持续时间
transition-duration: time;
time:设置完成过渡效果需要花费的时间(以秒或毫秒计),如:transition-duration: 1s;。默认值是 0,意味着不会有效果。
设置过渡动画的延时执行时间
transition-delay: time;
time:设置过渡动画延时执行的时间(以秒或毫秒计),如:transition-delay: 1s;。默认值是 0,意味着不会有延时效果。
设置过渡动画的速度类型
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear:以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease:默认值。慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in:慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out:慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out:慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
示例
- 示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
position: relative;
float: left;
border: 1px solid #EE3030;
background-color: #EE3030;
transition-property: all;
transition-duration: 1s;
transition-delay: 0.5s;
transition-timing-function: linear;
}
.box:hover {
width: 400px;
height: 400px;
background-color: #000000;
}
</style>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上过渡动画可简写为:
transition: all 1s 0.5s linear;
- 示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
position: relative;
float: left;
border: 1px solid #EE3030;
background-color: #EE3030;
transition: width 1s linear, background-color 1s 0.3s linear, height 1s 1.2s linear;
}
.box:hover {
width: 400px;
height: 400px;
background-color: #000000;
}
</style>
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
网友评论