CSS3 transition的使用
大家好，又见面了，我是你们的朋友全栈君。
一、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.cn/158407.html原文链接：https://javaforall.cn
腾讯云开发者
