一真的小站

鳶飛魚躍,無處不是化境。

0%

十九、过渡

十九、过渡

通过过渡transition,我们可以在不使用IFlash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.要实现这一点,必须规定两项内容:

1.规定希望把效果添加到哪个CSS属性上,

2.规定效果的时长

语法

transition: property duration timing-function delay;

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<head>
<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:过渡效果的耗时I以秒做为单位/ */
/* 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.建议不用*/
transition: all 2s
}

div:active {
left: 1000px;
background-color: blue;
}
</style>
</head>

参数

对象 定义
property 规定设置过度效果的CSS属性的名称
duration 规定完成过渡效果需要多少秒或毫秒
timing-function 规定速度效果的速度曲线
delay 定义过渡效果何时开始

补充参数

补充说明 tansition-timing-function:属性规定过渡效果的速度曲线

对象 定义
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之间的数值。