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

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

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

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

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

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

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

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

css3 전환 속성

Property	Description	CSS
transition	약어 속성, 하나의 속성에 4개의 전환 속성을 설정하는 데 사용됩니다.	3
transition-property	전환을 적용하는 CSS 속성의 이름을 지정합니다.	3
transition-duration	전환 효과에 걸리는 시간을 정의합니다. 기본값은 0입니다.	3
transition-timing-function	은 전환 효과의 시간 곡선을 지정합니다. 기본값은 "쉽게"입니다.	3
transition-delay	전환 효과가 시작되는 시점을 지정합니다. 기본값은 0입니다.	3

복합 속성

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

transition: <transition-property> || <transition-duration> || 
<transition-timing-function> || <transition-delay></transition-delay></transition-timing-function></transition-duration></transition-property>

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

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

    <div class="test"></div>

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

참고: 항상 transition-duration 속성을 ​​지정하세요. 그렇지 않으면 지속 시간이 0이 되고 전환이 효과가 없습니다. 1) 전환 가능한 스타일모든 CSS 스타일 값을 전환할 수 있는 것은 아닙니다. 중간 값이 있는 속성만 전환 효과가 있습니다. 자세한 내용은 다음과 같습니다렌더링: 2, 전환 기간 전환 기간 속성은 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값: 0초. [참고] 이 속성은 음수일 수 없습니다. [참고] 이 속성이 0s이면 기본값이고, 0이면 유효하지 않은 값입니다. 그래서 장치를 가져와야합니다. [참고] 값이 단일 값인 경우, 즉 모든 전환 속성이 ​​동일한 시간에 해당하고, 값이 여러 값인 경우 전환 속성이 ​​순서대로 지속 시간에 해당합니다. 3.transition-timing-functiontransition-timing-function 속성은 전환 효과의 속도를 지정합니다. 여러 값을 사용할 수 있습니다. 기본값: 여유로움. Value

	.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;     } }
Description
linear	같은 속도, 즉 균일한 속도로 시작하고 끝나는 전환 효과를 지정합니다. (입방 베지어(0,0,1,1)과 동일).
ease	는 천천히 시작했다가 점점 빨라졌다가 천천히 끝나는 전환 효과를 지정합니다(cubic-bezier(0.25,0.1,0.25,1)).

ease-in🎜🎜은 느린 속도(입방 베지어(0.42,0,1,1)와 동일)에서 시작하는 전환 효과를 지정합니다. 🎜🎜🎜🎜ease-out🎜🎜은 느린 속도(입방 베지어(0,0,0.58,1)와 동일)로 끝나는 전환 효과를 지정합니다. 🎜🎜🎜🎜ease-in-out🎜🎜느린 속도로 시작하고 끝나는 전환 효과를 지정합니다(입방 베지어(0.42,0,0.58,1)와 동일). 🎜🎜🎜🎜cubic-bezier(n,n,n,n)🎜🎜cubic-bezier 함수에서 자신만의 값을 정의하세요. 가능한 값은 0에서 1 사이입니다. 🎜🎜🎜🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!