CSS Lastnost: animation-direction

Lastnost animation-direction (slo. Smer animacije) določa, ali naj se animacija predvaja naprej, nazaj ali v izmeničnih ciklih.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>animation-direction</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <style>
        .material-symbols-outlined {
            color: red;
            font-variation-settings: "FILL" 1
        }
        span {
            animation-name: anima;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        @keyframes anima {
            from {
                transform: scale(0) translateX(10px) translateY(10px);
            }
            to {
                transform: scale(5) translateX(10px) translateY(10px);
            }
        }
    </style>
</head>
<body>
<span class="material-symbols-outlined">favorite</span>
</body>
</html>

REZULTAT

animation-direction: alternate	Animacija se predvaja najprej naprej, nato nazaj.	Glej primer
animation-direction: alternate-reverse	Animacija se najprej predvaja nazaj, nato pa naprej.	Glej primer
animation-direction: inherit	Podeduje to lastnost od nadrejenega elementa.	Glej primer
animation-direction: initial	Nastavi to lastnost na privzeto vrednost.	Glej primer
animation-direction: normal	Animacija se predvaja normalno. Privzeta vrednost.	Glej primer
animation-direction: reverse	Animacija se predvaja v obratni smeri.	Glej primer