---

# Kriterij Ocenjevanja: CSS Animacija - Logotip

## OSNOVNA NALOGA
Oblikuj in s HTML ter CSS ustvari poljuben logotip. Nato ga oživi z uporabo CSS tranzicij in/ali animacij.

---

## OCENJEVALNI KRITERIJI

### OCENA 2 (ZADOSTNO)
* **Logotip:** Izdelan preprost logotip (vsaj 2-3 HTML elementi) z osnovnim CSS oblikovanjem.
* **Animacija:** Vsaj ena preprosta CSS `transition` na `:hover` (npr. sprememba barve, rahla povečava).
* **Koda:** Ločeni in veljavni HTML ter CSS datoteki z osnovnimi komentarji.

### OCENA 3 (DOBRO)
* *(Vsi pogoji iz ocene 2)*
* **Logotip:** Bolj detajlen logotip (vsaj 4-5 HTML elementov ali uporaba psevdo-elementov za oblike).
* **Animacija:** Vsaj dve različni CSS `transition` na `:hover`, od katerih ena vključuje `transform` (npr. `scale`, `rotate`). Tranzicije so usklajene.
* **Koda:** Smiselna uporaba CSS razredov.

### OCENA 4 (PRAV DOBRO)
* *(Vsi pogoji iz ocene 3)*
* **Logotip:** Kreativen logotip z naprednejšim CSS oblikovanjem (npr. gradienti, sence, kompleksnejši psevdo-elementi).
* **Animacija:** Vsaj ena preprosta CSS `@keyframes` animacija (2-3 koraki), ki se zgodi ob nalaganju ali na `:hover` (uporabljene lastnosti kot `animation-duration`, `animation-timing-function`). Animacija usklajeno spreminja vsaj dva dela logotipa.

### OCENA 5 (ODLIČNO)
* *(Vsi pogoji iz ocene 4)*
* **Logotip:** Izrazito kreativen, unikaten in tehnično dovršen logotip.
* **Animacija:** Kompleksna `@keyframes` animacija (vsaj 4+ koraki), ki animira več CSS lastnosti hkrati, je tekoča in pripoveduje "zgodbo" logotipa.
* **Kreativna nadgradnja animacije:** Izbira ene od možnosti:
* Animacija se odziva na interakcijo na ne-trivialen način (npr. drugačna animacija ob kliku).
* Uporaba `animation-delay` za zaporedno animiranje delov.
* Ustvarjanje iluzije globine ali kompleksnega gibanja.
* **Koda:** Izjemno čista, strukturirana in učinkovita koda. Premišljena uporaba CSS lastnosti za optimalno delovanje animacij.

---

## TEHNIČNE ZAHTEVE
- **Jezika:** HTML5, CSS3.
- **Oddaja:** ZIP datoteka (`index.html`, `style.css`, opcijsko `README.md`).
- **Delovanje:** V zadnjih različicah brskalnikov Chrome ali Firefox.

## NASVETI
- Začni preprosto (statičen logotip, nato animacije).
- Uporabi `transition` za enostavne spremembe, `@keyframes` za kompleksnejše.
- Pazi na `transform-origin` in časovne funkcije.
- Subtilnost je pogosto boljša od pretiravanja.

## ROK ODDAJE
**14.6.2025**

---
*Opomba: Za dosego višje ocene morajo biti izpolnjeni vsi pogoji nižjih ocen.*

---

Primeri prof. Kozmusa:

Gumbi:

Vaja 1: https://jsfiddle.net/5hsgbkjt/

Vaja 2: https://jsfiddle.net/r5tudjo7/

Vaja 3: https://jsfiddle.net/3rkgvzsc/

Vaja 4: https://jsfiddle.net/3hb8td0g/

Vaja 5: https://jsfiddle.net/eh49z5s3/

Vaja 6: https://jsfiddle.net/bpL8h095/

Vaja 7: https://jsfiddle.net/L5rqs37h/

Meni:

Vaja 1: https://jsfiddle.net/8sh3y4fx/

Vaja 1a: https://jsfiddle.net/tga6v1eu/

Vaja 2: https://jsfiddle.net/x3v0wjkq/

Vaja 3: https://jsfiddle.net/nzhpLkwj/

Vaja 4: https://jsfiddle.net/tzrdgqvc/

Vaja 5: https://jsfiddle.net/9yvc82ok/

Vaja 6: https://jsfiddle.net/e5oz7n1r/

Vaja 7: https://jsfiddle.net/pdyc7shu/

Vaja 8: https://jsfiddle.net/vcak894q/

Grafika: (slika v kodi v URLju)

Vaja 1: https://jsfiddle.net/hupson9c/1/

Vaja 2: https://jsfiddle.net/krav8bdq/1/