• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abgekürzte Schreibweise bei Animation

@

@Alphavirus

Neues Mitglied
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>
 
Werbung:
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
 
@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?
Zum Vergrößern anklicken....
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.
 
Werbung:
CSS: 
 .container div.box-1 {
 animation-timing-function: ease;
}
Geht, aber da schreibst du mehr als in der nicht Shorthand-Schreibweise...
 
Werbung:
Werbung:
Ich habe dir doch geschrieben, was funktioniert!
Verschachtelte Elemente habe eine höhere Spezifität:
CSS: 
.selector {
    
}

body .selector {
/* hat eine höhere Spezifität, weil verschachtelt*/   
}
 
Oliver77 schrieb:
Ich habe dir doch geschrieben, was funktioniert!
Zum Vergrößern anklicken....
Merkst du was? Es bring dem Fragenden exakt garnichts ihm eine fertige Lösung hinzuklatschen. Er hat dann zwar funktionierenden Code, allerdings keine Ahnung warum der jetzt funktioniert - wenn er selbst erst was nachlesen und dadurch lernen muss (hier: was Spezifität ist), weiß er beim nächsten Mal selbst wo das Problem ist und wie es sich lösen lässt.
 
  • Like
Reaktionen: msi
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben