# 17. Átmenetek és animációk

2025. november 23. • 22 perc olvasás • CSS3 haladó

A CSS átmenetek és animációk életre keltik a weboldalakat. Ebben a cikkben megtanulod a transition és @keyframes használatát, valamint a transform tulajdonságot az elemek átalakítására.

#### Érettségi információ

Ez a lecke BÓNUSZ anyag!

A CSS átmenetek és animációk NEM részei az érettségi követelményeknek. Ez a lecke hasznos kiegészítő tudás, amivel modern, interaktív weboldalakat készíthetsz.

## Transition - Átmenetek BÓNUSZ

A `transition` sima átmenetet biztosít két állapot között (pl. hover effekt).

CSS - transition alapok
`/* transition: property duration timing-function delay; */ /* Alap átmenet */ .button { background: #007bff; transition: background 0.3s ease; } .button:hover { background: #0056b3; } /* Minden tulajdonságra */ .card { transition: all 0.3s ease; } /* Több tulajdonság külön */ .element { transition: background 0.3s ease, transform 0.2s ease-out, box-shadow 0.3s ease; } /* Egyedi tulajdonságok */ .detailed { transition-property: background, transform; transition-duration: 0.3s, 0.2s; transition-timing-function: ease, ease-out; transition-delay: 0s, 0.1s; }`

### Timing functions (időzítő függvények)

CSS - Timing functions
`/* Beépített timing functions */ .ease { transition-timing-function: ease; } /* Alapértelmezett: lassú-gyors-lassú */ .linear { transition-timing-function: linear; } /* Egyenletes */ .ease-in { transition-timing-function: ease-in; } /* Lassú indulás */ .ease-out { transition-timing-function: ease-out; } /* Lassú befejezés */ .ease-in-out { transition-timing-function: ease-in-out; } /* Mindkettő */ /* Cubic-bezier: egyedi görbe */ .custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* "Bounce" effekt */ } /* Steps: lépcsőzetes átmenet */ .steps { transition-timing-function: steps(5); /* 5 lépésben */ }`

#### Élő példa - Hover átmenetek:

## Transform - Átalakítások BÓNUSZ

A `transform` tulajdonsággal mozgathatod, forgathatod, skálázhatod és ferdeítheted az elemeket.

CSS - transform függvények
`/* Mozgatás (translate) */ .move-right { transform: translateX(50px); } .move-down { transform: translateY(50px); } .move-both { transform: translate(50px, 30px); } .move-3d { transform: translate3d(50px, 30px, 20px); } /* Forgatás (rotate) */ .rotate { transform: rotate(45deg); } .rotate-x { transform: rotateX(45deg); } /* 3D */ .rotate-y { transform: rotateY(45deg); } /* 3D */ /* Skálázás (scale) */ .scale-up { transform: scale(1.2); } /* 120% */ .scale-down { transform: scale(0.8); } /* 80% */ .scale-x { transform: scaleX(1.5); } /* Csak vízszintesen */ /* Ferdeítés (skew) */ .skew { transform: skew(10deg, 5deg); } .skew-x { transform: skewX(10deg); } /* Kombinálás */ .combined { transform: translate(20px, 10px) rotate(15deg) scale(1.1); } /* Transform origin (átalakítás középpontja) */ .corner-rotate { transform-origin: top left; /* Bal felső sarok körül forog */ transform: rotate(45deg); } /* Alapértelmezett: center center (50% 50%) */ .custom-origin { transform-origin: 0% 100%; /* Bal alsó sarok */ }`

#### Élő példa - Transform hover:

translate
rotate
scale
skew

## @keyframes - Animációk BÓNUSZ

A `@keyframes` lehetővé teszi összetett, több lépéses animációk definiálását.

CSS - @keyframes és animation
`/* Animáció definiálása */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Százalékos keyframes */ @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } /* Animáció alkalmazása */ .animated { animation: fadeIn 1s ease forwards; } /* animation tulajdonságok */ .detailed-animation { animation-name: bounce; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: infinite; /* vagy szám */ animation-direction: alternate; /* normal, reverse, alternate */ animation-fill-mode: forwards; /* none, forwards, backwards, both */ animation-play-state: running; /* running, paused */ } /* Rövidített forma */ /* animation: name duration timing delay count direction fill-mode; */ .shorthand { animation: bounce 1s ease-in-out 0s infinite alternate forwards; }`
CSS - Gyakorlati animációk
`/* Pulsating effekt */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s ease-in-out infinite; } /* Spinning loader */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; } /* Slide in */ @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-in { animation: slideInLeft 0.5s ease-out forwards; } /* Shake effekt */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .shake:hover { animation: shake 0.5s ease-in-out; }`

#### Élő példa - Animációk:

## Teljesítmény optimalizálás BÓNUSZ

CSS - GPU-gyorsított tulajdonságok
`/* GPU-gyorsított (gyors, sima) */ .fast { transform: translateX(100px); /* ✅ */ opacity: 0.5; /* ✅ */ } /* CPU-intenzív (lassabb) - kerüld animációban */ .slow { left: 100px; /* ❌ */ width: 200px; /* ❌ */ margin-left: 50px; /* ❌ */ } /* Jó gyakorlat: will-change hint */ .optimized { will-change: transform, opacity; /* Figyelmeztetés a böngészőnek, hogy animáció jön */ } /* Csak szükség esetén használd, majd távolítsd el */ .element:hover { will-change: transform; } /* Prefers-reduced-motion: akadálymentesség */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }`

#### Animáció teljesítmény tippek

- Használd: transform és opacity - GPU gyorsított
- Kerüld: width, height, margin, padding animálását
- will-change: Csak szükség esetén, ne túlhasználd
- prefers-reduced-motion: Tiszteld a felhasználói beállításokat

## Gyakorlati példa: Animált kártya BÓNUSZ

CSS - Animált termékkártya
`.product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .product-card img { width: 100%; transition: transform 0.5s ease; } .product-card:hover img { transform: scale(1.1); } .product-card .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); transform: translateY(100%); transition: transform 0.3s ease; } .product-card:hover .overlay { transform: translateY(0); }`

## Összefoglalás

- Transition: Két állapot közötti sima átmenet (hover, focus)
- Transform: translate, rotate, scale, skew
- @keyframes: Összetett, többlépéses animációk
- Animation: Keyframes alkalmazása elemekre
- Teljesítmény: transform és opacity a leggyorsabb

#### Következő lépések

Következő cikk: CSS változók és modern technikák