CSS3 전환은 어떤 속성을 사용합니까?

css3 전환에 사용되는 속성은 다음과 같습니다: 1. 전환 속성 3. 전환 기간 5. 전환 지연

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 전환은 요소가 한 스타일에서 다른 스타일로 점진적으로 변경되는 효과입니다.

이를 달성하려면 다음 두 가지를 지정해야 합니다.

• 효과를 추가할 CSS 속성을 지정합니다.

• 효과 지속 시간을 지정합니다.

전환 속성을 통해 웹 프런트엔드 개발자는 JavaScript 없이 간단한 애니메이션 대화형 효과를 구현할 수 있습니다. 이를 달성하려면 한 가지, 즉 효과 지속 시간을 지정해야 합니다.

css3 전환 속성

복합 속성

전환의 4개 하위 속성 중 만 필수 값이며 0일 수 없습니다. 그 중 과 는 모두 시간이다. 두 번 동시에 발생하면 첫 번째는 이고, 두 번째는 이고, 한 번만 발생하면 이고, 입니다. - 지연> 기본값은 0

transition:  ||  ||  || 

입니다. [참고] 전환의 4가지 하위 속성은 쉼표로 구분할 수 없으며 공백으로만 구분할 수 있습니다. 쉼표로 구분된 것은 서로 다른 속성을 나타내고(전환 속성은 다중 값을 지원하며 다중 값 부분은 나중에 소개됩니다) 공백으로 구분된 것은 서로 다른 속성의 전환에 대한 4가지 하위 속성을 나타냅니다.

.test { border: 1px solid red; width: 100px; height: 50px; transition: 2s;/*代表持续时间为2s，延迟时间为默认值0 */ /* transition: 1s 2s; 代表持续时间为1s，延迟时间为2s */ } .test:hover { width: 300px; }

Related sub-properties

1, Transition-property

transition-property속성은 CSS 속성의 nametransition 효과를 지정합니다(전환 효과는 시작됩니다). 지정된 CSS 속성이 변경됩니다.) none: 스타일이 지정되지 않습니다. all: 기본값, 전환 속성 속성을 지원하는 지정된 요소의 모든 스타일을 나타냅니다. : 전환 가능한 스타일, 쉼표로 구분하여 여러 스타일을 작성할 수 있습니다. transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。none: 没有指定任何样式，all: 默认值，表示指定元素所有支持transition-property属性的样式。 : 可过渡的样式，可用逗号分开写多个样式。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

1）、可过渡的样式

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果 ,具体如下

颜色: color background-color border-color outline-color 位置: backround-position left right top bottom 长度: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3]font-size line-height text-indent vertical-align [4]border-spacing letter-spacing word-spacing 数字: opacity visibility z-index font-weight zoom 组合: text-shadow transform box-shadow clip 其他: gradient

.test { border: 1px solid red; width: 100px; height: 50px; background-color: lightblue; transition: width 2s, background-color 2s ease 0.5s; /*代表width持续时间为2s，延迟时间为默认值0； background-color持续时间2s 延迟0.5s */ } .test:hover { width: 300px; background-color: indianred; }

效果图：

2、transition-duration

transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值：0s。

[注意]该属性不能为负值 。

[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

3、transition-timing-function

transition-timing-function

.test { border: 1px solid red; width: 100px; height: 50px; transition: 3s;/* 设置反向状态 */ } .test:hover { width: 300px; transition: 100ms; }

/* 把浏览器的宽度拖动到小于1000px时触发 */ @media (max-width: 1000px){ .test{ width: 500px; } }

4、transition-delay

transition-delay属性指定何时将开始切换效果，值是指以秒为单位（S）或毫秒（ms）。默认值：0s。

[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

过渡阶段

• 过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。

• 过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值 。

• 过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值

• 以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准 。

.test { border: 1px solid red; width: 100px; height: 50px; transition: 3s;/* 设置反向状态 */ } .test:hover { width: 300px; transition: 100ms; }

效果:

触发方式

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

• hover ： 鼠标悬停触发 。

• active ： 用户单击元素并按住鼠标时触发 。

• focus ： 获得焦点时触发。

• @media触发 ： 符合媒体查询条件时触发 。

/* 把浏览器的宽度拖动到小于1000px时触发 */ @media (max-width: 1000px){ .test{ width: 500px; } }

（学习视频分享：css视频教程）

위 내용은 CSS3 전환은 어떤 속성을 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!