简介
transitionde的功能：就是实现css的属性值在一定的时间区间内平滑的过渡。
除了javascript处罚外，还有一些伪类来触发：:hover; :focus; :active; :target; :checked。
创建过渡的步骤
- 在默认样式中声明元素的初始状态的样式；
- 声明过渡元素最终状态样式；
- 在默认样式中通过添加过渡函数，添加一些不同的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.transition{
/*第一步：常规样式*/
background: #8ec63f;
width:100px;
height: 100px;
border-radius: .5em;
/*第三步：添加过渡函数*/
-webkit-transition: background 2s linear 2s, border-radius 3s ease-in-out;
-o-transition: background 2s linear 2s, border-radius 3s ease-in-out;
transition: background 2s linear 2s, border-radius 3s ease-in-out;
}
/*第二步：声明最终样式*/
.transition:hover{
background: #f7941d;
border-radius: 50%;
}
兼容性
| chrome | IE | opera | safari | firefox |
|---|---|---|---|---|
| 4.0+ | 10+ | 10.5+ | 3.1+ | 4.0+ |
当然虽然支持很好，但是在使用的时候还是要加上浏览器的前缀。
过渡属性详解
复合属性：1
transition:transition-property transition-duration transition-timing-function transition-delay ;
- transition-property:指定过渡的css属性
- transition-duration:过渡所需的时间
- transition-timing-function:过渡函数
- transition-delay:过渡开始出现的延迟时间
transition-property
1.取值：all/none/single-transition-property
2.关于single-transition-property；并不是所有的属性值均可以用这个的。具有中值属性的属性才可以。
3.整理
| 属性 | 值eg |
|---|---|
| 颜色属性 | background/color… |
| 长度值或者百分比 | word-spacing/width/vertical-align/top../min-width/max-height/line-height/backgroung-position |
| integer | z-index |
| number | zoom/opacity/font-weight |
| 变形 | rotate()/scale()/skew()/translate() |
| visibility | 0~1 |
| 阴影 | text-shadow |
| 渐变：每次停止时的位置和颜色进行变化 | 必须有相同的类型和相同的停止数值 |
| … | … |
transition-duration
transition-timing-function
各个函数详解
1.单一的过渡函数
ease：默认值。由快变慢。
linear：匀速。
ease-in：速度越来越快，加速。
ease-out：越来越慢，减速。
ease-in-out：先加速再减速，渐显渐隐效果。
2.三次贝塞尔函数
使用方法：
1 | transition-timing-function: cubic-bezier(P0, P1, P2, P3) |
自定义过渡函数
如图：可以明白自定义函数的原理。
显然，可以用cubic-bezier自定义出单一的过渡函数。
3.step()1
step(integer,start/end)
一张图来说明：
transition-delay
这个属性和transition-duration一样简单，继续略。
触发过渡
1.伪元素触发
- :active点击鼠标并且需要按住。
- :focus
- :checked
- :hover
1
2
3
4
5
6
7
8
9input[type="radio"] ~ span{
width:100px;
/*display:block;*/
border:1px solid red;
transition:width 2s ease-in 1s;
}
input[type="radio"]:checked ~ span{
width:200px;
}
2.媒体查询触发
这种方法可以在实现不同的屏幕大小的时候可以平滑过渡。
3.javascript触发
css3过渡技巧
css Dock示例总结
- webkit独有的镜像属性box-reflec
使用方法：1
2-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>
box-reflect：none | <direction> <offset>? <mask-box-image>
取值说明：
- none:此值为box-reflect默认值，表示无倒影效果；
:此值表示box-reflect生成倒影的方向，主要包括以下几个值： - above:表示生成的倒影在对象（原图）的上方；
- below:表示生成的倒影在对象（原图）的下方；
- left:表示生成的倒影在对象(原图)的左侧；
- right:表示生成的倒影在对象(原图)的右侧；
:用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值，如： - :使用长度值来设置生成的倒影与原图之间的间距，只要是CSS中的长度单位都可以，此值可以使用负值；
- :使用百分比来设置生成的倒影与原图之间的间距，此值也可以使用负值。
:用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。 1
2
3
4
5
6
7-webkit-box-reflect: below -16px -webkit-gradient(
linear, left top, left bottom,
from(transparent),
color-stop(91%, rgba(255, 255, 255, .1)),
color-stop(91.01%, transparent),
to(transparent)
);模仿tooltips效果
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.dock em {
position: absolute;
top: -34px;
left: 50%;
display: none;
width: 150px;
margin-left: -75px;
text-align: center;
}
.dock em:after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 0;
height: 0;
/*下三角实现方法*/
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, .6);
border-bottom: none;
}
.dock em span {
display: inline-block;
padding: 5px 12px;
font-size: 14px;
font-style: normal;
color: #FFF;
background: #000;
background: rgba(0, 0, 0, .6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
border-radius: 12px;
}
.dock li:hover em,
.dock li a:focus em {
display: block;
}
