Heim >Web-Frontend >CSS-Tutorial >Beispielanalyse eines Übergangsattributs in CSS3

Beispielanalyse eines Übergangsattributs in CSS3

黄舟
黄舟Original
2017-10-24 10:21:502188Durchsuche

1. Beschreibung

1.1 Definition und Verwendung

Das Übergangsattribut ist ein abgekürztes Attribut, das zum Festlegen von vier Übergangseigenschaften verwendet wird:

transition-property: gibt die Einstellung von an Übergang Der Name der CSS-Eigenschaft für den Effekt.

Übergangsdauer: Gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.

transition-timing-function: Gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.

Übergangsverzögerung: Definiert, wann der Übergangseffekt beginnt.

1.2 Syntax

transition: property duration timing-function delay;

1.3 Übergangszeitfunktion

1.3.1 Syntax
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);
1.3.2 Beschreibung
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之间的数值。

2. Beispiel

<style>
    .transition-example{
        width: 500px;
        height: 370px;
        background: #ccc;
        padding: 10px 0;
    }
    .transition-example:hover>p{
        margin-left: 90%;
        transform: rotate(360deg);
        border-radius: 5px;
    }
    .transition-example>p{
        width: 50px;
        height: 50px;
        text-align: center;
        margin: 10px 0;
        background-color: blue;
        color: #fff;
    }
    .linear{
        transition: all 5s linear;
    }
    .ease{
        transition: all 5s ease;
    }
    .ease-in{
        transition: all 5s ease-in;
    }
    .ease-out{
        transition: all 5s ease-out;
    }
    .ease-in-out{
        transition: all 5s ease-in-out;
    }
    .cubic-bezier{
        transition: all 5s cubic-bezier(0.42,0,0.58,1);
    }
    
</style>
<p class="transition-example">
    <p class="linear">linear</p>
    <p class="ease">ease</p>
    <p class="ease-in">ease-in</p>
    <p class="ease-out">ease-out</p>
    <p class="ease-in-out">ease-in-out</p>
    <p class="cubic-bezier">cubic-bezier</p>
</p>
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier

Das obige ist der detaillierte Inhalt vonBeispielanalyse eines Übergangsattributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn