# A sáv animálása

> Animate.css-animáció hozzáadása a sütisávhoz egyéni CSS-sel.

A 6.0-s sávot úgy építették, hogy teljesen rugalmas legyen. Az alapbeállítás egyszerű, megfelel a WCAG és ADA elvárásoknak, és sok beállítása elérhető a felületen. Animációt is adhatsz hozzá az Animate.css animációi közül; az alábbiakban négyet mutatunk.

## Az animate.css betöltése

A legtöbb webhelyen nem kell hozzáadni: a téma vagy a böngésző már tartalmazza, ezért előbb próbáld meg nélküle. Ha az animáció mégsem működik, a webhely `<head>` részébe tedd be az Animate.css stíluslapjára mutató `link` elemet. Ehhez használhatsz például Header Footer Code Manager bővítményt, vagy FTP-n át is megteheted.

## Az animáció kiválasztása

1. A **Complianz → Consent Banner → Custom CSS** oldalon kapcsold be az egyéni CSS-t (**Use Custom CSS**).
2. A **Complianz → Consent Banner → Appearance** oldalon állítsd be:
   - **Position**: bármelyik, kivéve a középre igazítottat (a középre igazított sáv `transform` tulajdonságai bizonyos animációkat nem engednek),
   - **Animation**: **None**.
3. A **Custom CSS** fülre írd be a választott animáció kódját.

### Rubber band

```css
.cmplz-cookiebanner {
    animation: rubberBand 1s;
    -webkit-animation: rubberBand 1s;
    -moz-animation: rubberBand 1s;
    -o-animation: rubberBand 1s;
    -ms-animation: rubberBand 1s;
}
```

### Tada

```css
.cmplz-cookiebanner {
    animation: tada 1s;
    -webkit-animation: tada 1s;
    -moz-animation: tada 1s;
    -o-animation: tada 1s;
    -ms-animation: tada 1s;
    animation-delay: 0.3s;
}
```

### Roll in

```css
.cmplz-cookiebanner {
    animation: rollIn 1s;
    -webkit-animation: rollIn 1s;
    -moz-animation: rollIn 1s;
    -o-animation: rollIn 1s;
    -ms-animation: rollIn 1s;
}
```

### Flip in Y

```css
.cmplz-cookiebanner {
    animation: flipInY 2s;
    -webkit-animation: flipInY 2s;
    -moz-animation: flipInY 2s;
    -o-animation: flipInY 2s;
    -ms-animation: flipInY 2s;
}
```

Nem mindegyik animáció illik minden webhelyhez, ezért próbáld ki, melyik áll jól az oldaladon.