CSS Animacije

CSS Animacije (ang. CSS Animations)

CSS Animacije omogočajo animirane prehode iz ene konfiguracije sloga v drugo. Animacije so sestavljene iz dveh komponent, sloga, ki opisuje animacijo CSS, in niza ključnih sličic, ki označujejo začetno in končno stanje sloga animacije ter možne vmesne točke. Animacije CSS imajo tri ključne prednosti pred tradicionalnimi tehnikami animacije, ki temeljijo na skriptih. So preproste za uporabo in izdelavo animacije. Ustvarimo jih lahko brez JavaScript poznavanja. Animacije delujejo dobro pod zmerno obremenitvijo sistema, vendar lahko delujejo slabo v JavaScript. Če brskalniku omogočimo nadzor nad animacijami, lahko optimizira zmogljivost in učinkovitost z minimiziranjem posodabljanje animacij, ki se izvajajo na zavihkih.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>animation-duration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

@keyframes anima1 {
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima2 {
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima3 {
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima4 {
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima5 {
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima6 {
            0% {
                border-radius: 50%;
            }
            50% {
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
            75% {
                border-radius: 50%;
            }
        }
        @keyframes anima7 {
            0% {
                border: 2px solid black;
                background-color: transparent;
            }
            50% {
                border: none;
                background-color: red;
                border-radius: 50%;
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
            75% {
                border: 2px solid black;
                background-color: transparent;
            }
        }
        @keyframes anima8 {
            10% {
                transform: translateX(-1px);
            }
            20% {
                transform: translateX(1px);
            }
            30% {
                transform: translateX(-1px);
            }
            40% {
                transform: translateX(1px);
            }
            50% {
                border-radius: 50%;
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
        }
        @keyframes anima9 {
            25% {
                background-color: transparent;
                border-radius: 50%;
                border: 2px solid blue;
            }
            50% {
                background-color: transparent;
                border-radius: 50%;
                border: 2px solid purple;
                transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
            }
            75% {
                background-color: transparent;
                border-radius: 50%;
                border: 2px solid red;
            }
        }
        @keyframes anima10 {
            0% {
                transform: translateY(260px);
            }
            25% {
                transform: rotate3d(1, 1, 1, 180deg);
            }
            50% {
                transform: translateY(260px);
            }
            75% {
                transform: rotate3d(1, 1, 1, -180deg);
            }
        }

@media screen and (max-width: 1280px) {
            .movingBoxMain .movingBox {
                width: 100%;
            }
        }

@media screen and (max-width: 720px) {
            .movingBoxMain .movingBox .movingBoxInside {
                width: 25px;
                height: 25px;
            }
        }

@media screen and (max-width: 420px) {
            .movingBoxMain .movingBox .movingBoxInside {
                width: 15px;
                height: 15px;
            }
        }

@media screen and (max-width: 350px) {
            .movingBoxMain .movingBox .movingBoxInside {
                width: 5px;
                height: 5px;
            }
        }
    </style>
</head>
<body>
<div class="movingBoxMain" id="anima">
    <div class="movingBox">
        <div class="movingBoxInside" id="anima1"></div>
        <div class="movingBoxInside" id="anima2"></div>
        <div class="movingBoxInside" id="anima3"></div>
        <div class="movingBoxInside" id="anima4"></div>
        <div class="movingBoxInside" id="anima5"></div>
        <div class="movingBoxInside" id="anima6"></div>
        <div class="movingBoxInside" id="anima7"></div>
        <div class="movingBoxInside" id="anima8"></div>
        <div class="movingBoxInside" id="anima9"></div>
        <div class="movingBoxInside" id="anima10"></div>
    </div>
</div>
</body>
</html>

V tem poglavju bomo spoznali naslednje lastnosti:

@keyframes	Animacija omogoča spreminjanje elementa iz enega sloga v drugega.	Glej primer
animation-name	Podaja ime za animacijo.	Glej primer
animation-duration	Določa koliko časa naj animacija traja.	Glej primer
animation-iteration-count	Določa kolikokrat naj se animacija predvaja.	Glej primer
animation-timing-function	Podaja krivuljo hitrosti animacije.	Glej primer
animation-direction	Določa, v katero smer predvajanja animacija.	Glej primer
animation-play-state	Določa ali se animacija izvaja ali ne.	Glej primer
animation-delay	Določa začetek animacije.	Glej primer
animation-fill-mode	Določa slog za element, ko se animacija ne predvaja.	Glej primer