Abgekürzte Schreibweise bei Animation

@Alphavirus · Gestern um 22:31

Moin
Ich hab den unten stehenden Code aus einem Tutorial.

Ich dachte, ich wär smart und hab den folgenden Code mit der Kurzschreibeweise abgekürzt:

Code:

   .container:hover div {
        animation-name: orangecubes;
        animation-duration: 5s;
    }

abgekürzt:

Code:

   .container:hover div {
        animation: orangecubes 5s;
    }

Soweit so gut.
Alllerdings funktioniert die Animation mit der Abkürzung nicht. Ist das ein Bug oder liegt der Fehler bei mir?

Hier der komplette Code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube Tut</title>
<style>

    .container {
        max-width: 700px;
        background-color: pink;
    }
    
    .container > div {
        width: 100px;
        border: 1px solid black;
        background-color: orange;
        font-weight: bold;
        margin-bottom: 20px;
        position: relative;
    }

    .container:hover div {
        animation-name: orangecubes;
        animation-duration: 5s;
    }
    
    @keyframes orangecubes {
        from {
            left: 0;
        }
        to {
            left: 85%;
        }
    }

    div.box-1 {
        animation-timing-function: ease;
    }

    div.box-2 {
        animation-timing-function: ease-in;
    }

    div.box-3 {
        animation-timing-function: ease-out;
    }

    div.box-4 {
        animation-timing-function: ease-in-out;   
    }

    div.box-5 {
        animation-timing-function: linear;
    }

    div.box-6 {
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
 </style>
</head>
<body>
    <div class="container">
        <div class="box box-1">ease</div>
        <div class="box box-2">ease-in</div>
        <div class="box box-3">ease-out</div>
        <div class="box box-4">ease-in-out</div>
        <div class="box box-5">linear</div>
        <div class="box box-6">cubic-bezier</div>
    </div>
</body>
</html>

AndreasB · Heute um 09:00

Hallo @Alphavirus

Dein Problem hier besteht aus den Zusammenspiel von zwei Faktoren:

1. Default Werte der "animation" Property
Werte, die bei der Kurzschreibweise nicht angegeben werden, bekommen die default Werte zugewiesen.

2. Niedrige Spezifität (engl: specificity) von .container:hover div
Dabei bekommen Selektoren eine Wertigkeit und wenn zwei Selektoren das selbe Objekt selektieren gewinnt die höhere Wertigket.

Um dein Problem zu lösen muss man einen dieser Faktoren ausschalten.
Du hattest ja den ersten Faktor ausgeschaltet, als du die "animation-" Properties einzeln gelistet hattest.

Wenn du nun mit der Kurzschreibweise gehen möchtest, musst du also den zweiten Faktor ausschalten.
Das kannst du erreichen, indem du
1. Die specificity der boxen erhöhst zB indem du den Selektor spezifischer machst: .container div.box-
2. Die specificity von .container:hover div verringerst zB über :where(.container:hover div) was die specificity auf 0 setzt.

Ich hoffe das hilft dir.

Andreas

tk1234 · Heute um 09:02

@Alphavirus schrieb:
Ich dachte, ich wär smart und hab den folgenden Code mit der Kurzschreibeweise abgekürzt:

Code:

.container:hover div { animation-name: orangecubes; animation-duration: 5s; }

abgekürzt:

Code:

.container:hover div { animation: orangecubes 5s; }

Soweit so gut.
Alllerdings funktioniert die Animation mit der Abkürzung nicht. Ist das ein Bug oder liegt der Fehler bei mir?

Oder. animation setzt noch mehr Eigenschaften, u.a. auch animation-timing-function wofür du keinen Wert angegeben hast und damit der Standardwert (ease) gilt. Du versuchst zwar diesen Wert für jedes einzelne div zu setzen, aber da die Spezifität des Selektors ».container:hover div« höher ist als die von »div.box-1«, werden die Werte für die einzelnen divs nicht übernommen. Schau dir das ganze am Besten mal in den Entwicklertools des Browsers (F12) an, dort kannst du sehen wo welche Eigenschaft her kommt.

Abgekürzte Schreibweise bei Animation

@Alphavirus

Neues Mitglied

AndreasB

Mitglied

tk1234

Aktives Mitglied

Neueste Beiträge