CSS3 transition的使用

全栈程序员-站长 • 2022年7月13日下午5:00 • 未分类 • 阅读 20

大家好，又见面了，我是你们的朋友全栈君。

一、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

值	描述
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