8.3 ➡️Transitions

Sehen Sie sich “Section 9 Topic 94” an.

Was ich in diesem Video lernen kann:

Padding:

CSS-Übergänge bieten eine Möglichkeit, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu steuern. Anstatt Eigenschaftsänderungen sofort wirksam werden zu lassen, können Sie bewirken, dass die Änderungen an einer Eigenschaft über einen bestimmten Zeitraum erfolgen. Wenn Sie beispielsweise die Farbe eines Elements von Weiß auf Schwarz ändern, erfolgt die Änderung normalerweise sofort. Bei aktivierten CSS-Übergängen treten Änderungen in Zeit Intervallen auf, die einer Beschleunigungskurve folgen. Alle können angepasst werden.
Animationen, die einen Übergang zwischen zwei Zuständen beinhalten, werden oft als implizite Übergänge bezeichnet, da die Zustände zwischen dem Start- und dem Endzustand implizit vom Browser definiert werden.

HTML:

    <h1>Transitions</h1>

    <div class="circle"></div>

    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

HTML

CSS:

.circle {
    width: 300px;
    height: 300px;
    background-color: rgb(9, 255, 0);
    transition: background-color 1s, border-radius 2s , margin-left 3s;



}

.circle:hover {
    background-color: rgb(255, 217, 0);
    border-radius: 50%;
    margin-left: 400px;
}

section div {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-color: rgb(0, 64, 255);
    margin: 20px 0;
    border-radius: 50%;
    transition: margin-top 3s;
    
}

section:hover div {
    margin-top: 400px;
}

CSS

Result:

Was sagt MDN dazu?

Previous Lesson

Back to Course

Next Lesson

HTML&CSS