# Egyéni animáció az interakciókhoz

> Saját animáció felvétele az interakciók Animáció listájába szűrővel és CSS-sel.

Az interakciókhoz a Bricks beépített animációkat kínál. Ha saját mozgásra van szükséged, két lépésben bővítheted a listát: felveszed az új animációt a választólistába, majd megírod hozzá a CSS-t.

A feladathoz egy kis PHP-kód és CSS kell. A PHP-kódot a gyermektéma `functions.php` fájljába vagy egy saját bővítménybe tedd, a Bricks szülőtémát ne módosítsd, mert a frissítés felülírja.

## 1. lépés: az új animáció felvétele a választólistába

A `bricks/setup/control_options` szűrővel add hozzá az új animációt az `animationTypes` tömbhöz. A kulcsnak egyedinek kell lennie.

```php
add_filter( 'bricks/setup/control_options', function( $options ) {
  // Az animáció kulcsa (myAnim1) egyedi legyen.
  $options['animationTypes']['myAnim1'] = esc_html__( 'Az én animációm 1', 'bricks' );
  return $options;
}, 10 );
```

Ezután az új animáció megjelenik az interakció **Animáció** legördülő listájában.

## 2. lépés: az animáció CSS-e

Amikor az interakció lefut, a Bricks egy osztályt rendel az elemhez az animáció kulcsából, `brx-animate-` előtaggal (a példában `brx-animate-myAnim1`).

Hozz létre egy CSS-osztályt, amely beállítja az animáció nevét, és add meg hozzá a kulcskockákat (`@keyframes`). A CSS-t a **Bricks → Beállítások → Egyéni kód** lap **Egyedi CSS** mezőjébe írhatod.

```css
.brx-animate-myAnim1 {
  animation-name: my-anim-1;
}

@keyframes my-anim-1 {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(-250px);
  }
  38% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }
  55% {
    animation-timing-function: ease-in;
    transform: translateY(-65px);
  }
  72% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  81% {
    animation-timing-function: ease-in;
    transform: translateY(-28px);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
  95% {
    animation-timing-function: ease-in;
    transform: translateY(-8px);
  }
  100% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
}
```

Ezután az új animációt bármelyik elem **Interakciók** paneljén kiválaszthatod.