CSS & Animácie — Čo vieme · JNFEZO

Čo vieme — Stránka 02

CSS & Animácie

Všetky ukážky sú živé a funkčné — transitions, keyframes, glassmorphism, clip-path, morph, neon, parallax a mnoho ďalšieho.

CSS Keyframes Transitions Transforms CSS Variables Clip-path Glassmorphism Neon Glow 3D Flip

Živé CSS ukážky

Animovaný gradient

background-size + background-position animácia — nekonečný pohyb farieb bez JS.

@keyframesbackground-sizelinear

Pohyblivý gradient

Čistý CSS — žiadny JavaScript

3D Hover Tilt

CSS transform perspective + rotateX/Y podľa pozície myši. Efekt hĺbky bez knižníc.

perspectiverotateX/Ymousemove

Pohybuj myšou tu

perspective(600px) + rotateX/Y

Pulse & Ripple

Vlnový efekt pomocou CSS scale + opacity animácie. Ripple po kliknutí na tlačidlo.

scaleopacityoverflow:hidden

CSS Loadery

Rôzne loading animácie čistým CSS — spinner, bouncing bars, dots. Bez SVG ani JS.

@keyframesanimation-delayborder

Glassmorphism

backdrop-filter: blur() + priesvitné pozadie + border. Moderný „mliečny sklenený“ efekt.

backdrop-filterblur()rgba()

Glassmorphism

backdrop-filter: blur(12px)

Hover Transitions

6 rôznych CSS transform efektov — scale, rotate, translateY, glow, skew, flip. Iba CSS.

transformtransition:hover

Scale ↕

Rotate ↻

Slide ↑

Glow ✦

Skew ⟋

Flip ↔

Skeleton Loading

Placholder animácia pred načítaním obsahu. CSS gradient sweep efekt — štandard UX.

gradient sweepUX patternloading

Neon Glow Text

CSS text-shadow s viacerými vrstvami + flicker animácia. Čisto CSS neon efekt.

text-shadowflickerglow layers

NEON

GLOW

CSS ONLY

CSS Custom Properties

Živá zmena CSS premenných cez JS. Hue slider mení celý komponent — farba, pozadie, border.

–custom-prophsl()setProperty

Ťahaj slider — mení CSS premennú

Hue: 270°

Clip-path Tvary

CSS clip-path polygon() a circle() — 8 rôznych tvarov. Hover scale efekt.

clip-pathpolygon()circle()

●

▲

⬡

★

→

◆

▱

❯

CSS Grid — živá zmena

Prepínanie grid-template-columns v reálnom čase. Vidíš ako CSS Grid funguje.

grid-template-columnsgapfr unit

Scroll Reveal

IntersectionObserver API + CSS transitions. Prvky sa zobrazujú pri scrollovaní do view.

IntersectionObserveropacitytranslateX

Prvok 1 — CSS transitions

Prvok 2 — opacity: 0 → 1

Prvok 3 — translateX(-20px → 0)

Prvok 4 — animation-delay stagger

Prvok 5 — IntersectionObserver

Parallax Depth

Vrstvy sa pohybujú rôznou rýchlosťou podľa myši — CSS transform + JS mousemove.

layersmousemovedepth effect

Pohybuj myšou

3 vrstvy · rôzna rýchlosť pohybu

Morphing Blob

CSS border-radius animácia s 8+ hodnotami — organický tvar v nekonečnej slučke.

border-radius8-valuesorganic shape

morph

3 bloby · rôzna rýchlosť a smer

Text Animácie

Wave efekt, Rainbow gradient text, Glitch efekt — čistý CSS bez JS.

waverainbowglitch

JNFEZO!

CSS je mocné

GLITCH CSS

Animated Borders

Marching ants, Rotating conic gradient border, Dashed border pulse — CSS only.

conic-gradient marching ants border anim

Marching ants border

Rotating gradient border

Animated dash border

3D Card Flip

CSS perspective + rotateY + backface-visibility. Karta sa otočí na hover alebo klik.

rotateY backface-visibility preserve-3d

Predná strana

Klikni pre otočenie

🃏

Zadná strana

rotateY(180deg)

✨

preserve-3d · backface-visibility:hidden

CSS Filter Effects

blur, sepia, invert, saturate, hue-rotate, contrast — hover pre efekt. Čistý CSS.

filter hue-rotate saturate

blur

sepia

invert

saturate

hue-rotate

contrast

Hover nad obrázkom pre filter efekt

JNFEZO

CSS & Animácie · Stránka 02 / 08

18 ukážok CSS Only Bez frameworku

      jnfezo.sk · 2026
    