Zadatak 6.9.

Uvod u CSS animacije

CSS animacije omogućuju stvaranje dinamičkih i interaktivnih efekata na web strnaicama.

One zapravo omogućuju promjene stanja elementa u određenom vremenu, bez potrebe za korištenjem JavaScript programskog jezika.

Svojstva CSS animacija

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

@keyframes

Animacija postupno mijenja stil elementa iz jednog u drugi, prema CSS-u navedenom unutar pravila @keyframes.


                    @keyframes animacija {

                        0% {
                            background-color: red; 
                        }

                        50% {
                            background-color: blue; 
                        }

                        100% {
                            background-color: green; 
                        }
                    }


                    .element {

                        animation: animacija 6s ease-in-out infinite;
                    }

Primjer

Napredne tehnike

CSS animacije mogu se kombinirati sa CSS transformacijama za stvaranje složenih vizualnih efekata.


                    @keyframes rotacija {

                        0% {
                            transform: rotate(0deg); 
                        }

                        100% {
                            transform: rotate(360deg); 
                        }
                    }


                    .element {

                        animation: rotacija 3s linear infinite;
                    }

Primjer