过渡属性(Transition)
过渡属性:用于目标元素的css属性值(由transition-property 属性规定)改变时,页面展示的过渡效果。
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。 | 3 |
transition-delay | 规定过渡效果何时开始。 | 3 |
1、transition-property
- 定义和用法
transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
-
语法
transition-property: none|all|property;
值 | 描述 |
---|---|
none | 没有属性会获得过渡效果。 |
all | 所有属性都将获得过渡效果。 |
property | 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。 |
2、transition-duration
- 定义和用法
transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
- 语法
transition-duration: time;
值 | 描述 |
---|---|
time | 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。 |
3、transition-timing-function
-
定义和用法
transition-timing-function 属性规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。
- 语法
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 之间的数值。 |
steps(n) | 允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。 |
steps(<number_of_steps>,<direction>)
第一个参数是一个正值,指定我们希望动画或者过渡分割的段数。
第二个参数定义了动画或者过渡的方向。这个值是可选的,在没有传递参数时,默认为”end”。
4、transition-delay
-
定义和用法
transition-delay 属性规定过渡效果何时开始。
transition-delay 值以秒或毫秒计。
默认值: | 0 |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.transitionDelay="2s" |
- 语法
transition-delay: time;
值 | 描述 |
---|---|
time | 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。 |
5、transition
-
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
- 语法
transition: property duration timing-function delay;
6、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 过渡</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: green;
margin: 100px auto;
font-size: 50px;
text-align: center;
border-radius: 10px;
/*transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
transition-property: none|all|property;
*/
transition-property: all;
/*属性规定完成过渡效果需要花费的时间(以秒或毫秒计)*/
transition-duration: 5s;
/*属性规定过渡效果的速度曲线。*/
transition-timing-function: linear;
/*规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。*/
transition-delay: 1s;
}
.box:hover{
transform: rotate(360deg) scale(2,2);
}
</style>
</head>
<body>
<div class="box">国</div>
</body>
</html>
鼠标移动到div上时,div顺时针旋转360度,同时长宽放大到2倍。