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 svojstvima CSS-a 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.



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. Na 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>


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.