IT TUTORIJALI

CSS3 - Animacije (Animations)

Kreiranje CSS3 animacija

U prethodnim lekcijama vidjeli ste kako raditi jednostavne animacije poput animiranja svojstva iz jedne vrijednosti u vrijednost putem CSS3 funkcije prelaza. Međutim, CSS3 prelazi pružaju malo kontrole nad tim kako animacija napreduje s vremenom. CSS3 animacije idu korak dalje s animacijama zasnovanim na ključnim kadrovima koje vam omogućavaju da odredite promjene u CSS svojstvima tokom vremena kao skup ključnih okvira, poput flash animacija. Stvaranje CSS animacija postupak je u dva koraka, kao što je prikazano u sljdećem primjeru:

Prvi korak gradnje CSS animacije je definisanje pojedinačnih ključnih okvira i imenovanje animacije deklaracijom ključnih okvira.
Drugi korak je referenciranje ključnih okvira po imenu pomoću svojstva animation-name, kao i dodavanje trajanja animacije i drugih opcionalnih svojstava animacije za kontrolu ponašanja animacije.

Međutim, nije potrebno definisati pravila ključnih okvira prije nego što ih referencirate ili primijenite. Sljedeći primjer će vam pokazati kako animirati okvir <div> vodoravno s jednog položaja na drugi pomoću CSS3 funkcije animacije.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standardna sintaksa */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 tranzicija animacije</title>
<style>
    .box {
        margin: 50px;
        width:153px;
        height:103px;
        background: url("/examples/images/tortoise-transparent.png") no-repeat;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: moveit;
        -webkit-animation-duration: 2s;
        /* Standardna sintaksa */
        animation-name: moveit;
        animation-duration: 2s;
    }
     
    /* Chrome, Safari, Opera */
    @-webkit-keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
     
    /* Standardna sintaksa */
    @keyframes moveit {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Morate navesti najmanje dva svojstva animation-name i animation-duration (veće od 0), da bi se animacija dogodila. Međutim, sva ostala svojstva animacije nisu obavezna, jer njihove zadane vrijednosti ne sprječavaju animaciju.

Napomena!

Nisu sva CSS svojstva animabilna. Uopšteno, bilo koje CSS svojstvo koje prihvata vrijednosti kao što su: brojevi, dužine, postoci ili boje je animirano.

Definisanje ključnih okvira (Keyframes)

Ključni okviri koriste se za specifikovanje vrijednosti svojstava animacije u različitim fazama animacije. Ključni kadrovi se navode pomoću specijalizovanog CSS pravila - @keyframes. Birač ključnih okvira za pravilo stila ključnog okvira započinje s postotkom (%) ili ključnim riječima od (from) (isto kao 0%) ili do (to) (isto kao 100%). Selektor se koristi za specifikovanje gdje se konstruiše ključni kadar tokom trajanja animacije. Procenti predstavljaju procenat trajanja animacije, 0% predstavlja početnu tačku animacije, 100% predstavlja krajnju tačku, 50% predstavlja sredinu i tako dalje. To znači da bi 50% ključni kadar u 2s animaciji bio 1s u animaciji.

.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standardna sintaksa */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Shake animacije</title>
<style>
    .box {
        margin: 50px;
        width:120px;
        height:110px;
        background: url("/examples/images/star-fish-transparent.png") no-repeat;
        position: relative;
        left: 0;
        /* Chrome, Safari, Opera */
        -webkit-animation-name: shakeit;
        -webkit-animation-duration: 2s;
        /* Standard syntax */
        animation-name: shakeit;
        animation-duration: 2s;
    }
    
    /* Chrome, Safari, Opera */
    @-webkit-keyframes shakeit {
        12.5% {left: -50px;}
        25% {left: 50px;}
        37.5% {left: -25px;}
        50% {left: 25px;}
        62.5% {left: -10px;}
        75% {left: 10px;}
    }
    
    /* Standardna sintaksa */
    @keyframes shakeit {
        12.5% {left: -50px;}
        25% {left: 50px;}
        37.5% {left: -25px;}
        50% {left: 25px;}
        62.5% {left: -10px;}
        75% {left: 10px;}
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Stenografsko svojstvo animacije

Mnogo je svojstava koja treba uzeti u obzir prilikom kreiranja animacija. Međutim, takođe je moguće navesti sva svojstva animacija u jednom svojstvu kako biste skratili kod. Svojstvo animacije je stenografsko svojstvo za postavljanje svih pojedinačnih svojstava animacije odjednom prema navedenom redosljedu. Pogledajmo primjer:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standardna sintaksa */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standardna sintaksa */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 beskonačne animacije</title>
<style>
    .box {
    margin: 50px;
        width:103px;
        height:130px;
        background: url("/examples/images/octopus.png") no-repeat;
        position: relative;
        /* Chrome, Safari, Opera */
        -webkit-animation: repeatit 2s linear 0s infinite alternate;
        /* Standardna sintaksa */
        animation: repeatit 2s linear 0s infinite alternate;
    }
     
    /* Chrome, Safari, Opera */
    @-webkit-keyframes repeatit {
        from {left: 0;}
        to {left: 50%;}
    }
     
    /* Standardna sintaksa */
    @keyframes repeatit {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Napomena!

Ako bilo koja vrijednost nedostaje ili nije navedena, umjesto nje će se koristiti zadana vrijednost za to svojstvo. To znači, ako vrijednost za svojstvo trajanja animacije nedostaje, neće se dogoditi prelaz, jer je njegova zadana vrijednost 0.

Svojstva CSS3 animacije

Sljedeća tabela daje kratak pregled svih svojstava povezanih s animacijom.

Svojstvo	Opis
animation	Stenografsko svojstvo za postavljanje svih svojstava animacije u jednoj deklaraciji.
animation-name	Određuje ime animacija definisanih @keyframes koje treba primijeniti na odabrani element.
animation-duration	Određuje koliko sekundi ili milisekundi treba animaciji da završi jedan ciklus animacije.
animation-timing-function	Određuje kako će animacija napredovati tokom trajanja svakog ciklusa.
animation-delay	Određuje kada će animacija započeti.
animation-iteration-count	Određuje koliko puta ciklus animacije treba reprodukovati prije zaustavljanja.
animation-direction	Određuje da li bi se animacija trebala reprodukovati unazad u alternativnim ciklusima.
animation-fill-mode	Određuje kako CSS animacija treba primijeniti stilove na svoj cilj prije i nakon izvršenja.
animation-play-state	Navodi da li se animacija izvodi ili pauzira.
@keyframes	Navodi vrijednosti za svojstva animiranja u različitim tačkama tokom animacije.