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>

Abgekürzte Schreibweise bei Animation

@Alphavirus

Neues Mitglied

Neueste Beiträge