大家好，又见面了，我是你们的朋友全栈君。
一、CSS3中transition的定义
transition: property duration timing-function delay;
transition 属性是一个简写属性，主要用于设置四个过渡属性：
| 值 | 描述 |
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。默认是 0。 |
| transition-timing-function | 规定速度效果的速度曲线。默认是 “ease”。 |
| transition-delay | 定义过渡效果何时开始。默认是 0。 |
二、CSS3中transition属性介绍
1、transition-property
transition-property是用来指定当元素其中一个属性改变时执行transition效果。
其主要有以下几个值：
(1)、none(没有属 性改 变)；
(2)、all（所有属性改变）这个也是其默认值；
(3)、indent（元素属性名）；
当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。
常用应用过渡的元素
|
CSS Property |
What Changes |
|
background-color |
Color |
|
background-image |
Only gradients |
|
background-position |
Percentage, length |
|
border-bottom-color |
Color |
|
border-bottom-width |
Length |
|
border-color |
Color |
|
border-left-color |
Color |
|
border-left-width |
Length |
|
border-right-color |
Color |
|
border-right-width |
Length |
|
border-spacing |
Length |
|
border-top-color |
Color |
|
border-top-width |
Length |
|
border-width |
Length |
|
bottom |
Length, percentage |
|
color |
Color |
|
crop |
Rectangle |
|
font-size |
Length, percentage |
|
font-weight |
Number |
|
grid-* |
Various |
|
height |
Length, percentage |
|
left |
Length, percentage |
|
letter-spacing |
Length |
|
line-height |
Number, length, percentage |
|
margin-bottom |
Length |
|
margin-left |
Length |
|
margin-right |
Length |
|
margin-top |
Length |
|
max-height |
Length, percentage |
|
max-width |
Length, percentage |
|
min-height |
Length, percentage |
|
min-width |
Length, percentage |
|
opacity |
Number |
|
outline-color |
Color |
|
outline-offset |
Integer |
|
outline-width |
Length |
|
padding-bottom |
Length |
|
padding-left |
Length |
|
padding-right |
Length |
|
padding-top |
Length |
|
right |
Length, percentage |
|
text-indent |
Length, percentage |
|
text-shadow |
Shadow |
|
top |
Length, percentage |
|
vertical-align |
Keywords, length, percentage |
|
visibility |
Visibility |
|
width |
Length, percentage |
|
word-spacing |
Length, percentage |
|
z-index |
Integer |
|
zoom |
Number |
2、transition-duration
transition-duration: time;
transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。默认值是 0，意味着不会有效果。
3、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 之间的数值。 |
4、transition-delay
transition-delay: time;
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取 值：<time>为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包 括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。
有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的 声明串 在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定。
文章转载自： CSS3 transition过渡效果 http://www.studyofnet.com/news/961.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/158407.html原文链接：https://javaforall.net
