Welche Eigenschaften verwendet der CSS3-Übergang?

Die beim CSS3-Übergang verwendeten Attribute sind: 1. Übergangseigenschaft 3. Übergangsdauer; 5. Übergangsverzögerung;

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3-Übergang ist der Effekt, dass sich ein Element allmählich von einem Stil zum anderen ändert.

Um dies zu erreichen, müssen zwei Dinge angegeben werden:

• Geben Sie die CSS-Eigenschaft an, zu der der Effekt hinzugefügt werden soll.

• Geben Sie die Dauer des Effekts an.

Über das Übergangsattribut können Web-Frontend-Entwickler einfache interaktive Animationseffekte ohne JavaScript implementieren. Um dies zu erreichen, muss eine Sache implementiert werden, nämlich die Angabe der Dauer des Effekts.

css3-Übergangseigenschaft

Zusammengesetztes Attribut

Von diesen vier Unterattributen des Übergangs ist nur ein erforderlicher Wert und darf nicht 0 sein. Darunter sind Wenn zwei Zeiten gleichzeitig auftreten, ist die erste und die zweite ist ; wenn es nur eine Zeit gibt, ist es und ist der Standardwert 0

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

[Hinweis] Die vier Untereigenschaften des Übergangs können nicht durch Kommas, sondern nur durch Leerzeichen getrennt werden. Da die durch Kommas getrennten Attribute unterschiedliche Attribute darstellen (das Übergangsattribut unterstützt mehrere Werte, wird der mehrwertige Teil später eingeführt), und die durch Leerzeichen getrennten Werte stellen die vier Übergangsunterattribute verschiedener Attribute dar.

        .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>

Verwandte Untereigenschaften

1, Transition-Property

transition-property Attribut gibt den Namensübergangseffekt des CSS-Attributs an (der Übergangseffekt wird gestartet). die angegebene CSS-Eigenschaft ändert sich). none: Es ist kein Stil angegeben, all: Standardwert, der alle Stile des angegebenen Elements angibt, die das Attribut „transition-property“ unterstützen. : Übergangsstil. Sie können mehrere durch Kommas getrennte Stile schreiben. 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视频教程）

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften verwendet der CSS3-Übergang?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!