Przykłady animacji CSS (fade-in, slide, bounce)

Animacje CSS pozwalają na dodanie efektownych przejść i ruchów do elementów, bez konieczności użycia JavaScript. Poniżej przedstawiamy trzy popularne animacje: fade-in, slide i bounce.

Animacja fade-in (zanikanie/pojawianie się)

Efekt: Element płynnie pojawia się (lub znika) przez zmianę wartości opacity.

Omówienie

• @keyframes fadeIn definiuje dwie klatki: od opacity: 0 do opacity: 1.
• Właściwość animation w .fade-box uruchamia animację i ustawia parametry czasowe.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Animacja slide (przesuwanie)

Efekt: Element płynnie przesuwa się z jednej pozycji do drugiej.

Omówienie

• @keyframes slideRight definiuje przesunięcie elementu w osi X (z 0 do 200px).
• Właściwość animation z ustawieniem alternate powoduje, że ruch odbywa się tam i z powrotem, dając wrażenie ciągłego „kołysania się” elementu.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Animacja bounce (podskakiwanie)

Efekt: Element porusza się w górę i w dół, nadając wrażenie sprężystości.

Omówienie

• @keyframes bounce zawiera trzy klatki – 0%, 50% i 100%.
• Najniższa i najwyższa klatka (0% i 100%) mają translateY(0), a środkowa (50%) przesuwa element do góry (translateY(-50px)), co daje efekt skakania.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Dzięki animacjom CSS typu fade-in, slide oraz bounce możesz ożywić elementy na swojej stronie, poprawiając atrakcyjność wizualną i interaktywność. Każda z prezentowanych animacji wykorzystuje regułę @keyframes do definiowania klatek kluczowych. Poprzez dostosowywanie czasu trwania (animation-duration), tempa (animation-timing-function) czy też liczby powtórzeń (animation-iteration-count), możesz łatwo stworzyć efekty, które urozmaicą wygląd i doświadczenie