Animacje CSS

Stronę tą wyświetlono już: 821 razy

CSS rozwinął się do tego stopnia, że można w nim tworzyć animacje przejścia jednego stylu w drugi. Jest to możliwe dzięki zastosowaniu trzech nowych atrybutów:

  • transition-property - określa, dla których atrybutów danego elementu strony będzie tworzona animacja przejścia;
  • trensmision-duration - określa czas trwania animacji przejścia;
  • transition-timing-function - funkcja sterująca zmianą prędkości przejścia po czasie, dostępne są następujące opcje:
    • ease (wartość domyślna) określa animację z wolnym startem, przyśpieszeniem i zwolnieniem animacji na końcu (można zastąpić za pomocą cubic-bezier(0.25,0.1,0.25,1));
    • linear określa stałą prędkość animacji (można zastąpić za pomocą cubic-bezier(0,0,1,1));
    • ease-in określa animację z wolnym startem i późniejszym jej przyspieszeniem (odpowiednik cubic-bezier(0.42,0,1,1))
    • ease-out określa animację z powolnym jej zakończeniem (odpowiednik cubic-bezier(0,0,0.58,1));
    • ease-in-out określa animację z powolnym startem i końcem (odpowiednik cubic-bezier(0.42,0,0.58,1));
    • step-start odpowiednik steps(1, start);
    • step-end odpowiednik steps(1, end);
    • steps(int,start|end) - określa funkcję kroków animacji za pomocą dwóch parametrów: pierwszy - określa liczbę interwałów w funkcji; drugi - (opcjonalny) może przyjmować wartość start lub end (domyślny, gdy parametr zostanie pominięty) i określa punkt animacji, do którego ta powinna dążyć;
    • cubic-bezier(n,n,n,n) - tworzy własną funkcję prędkości przejścia animacji. Wartości n mogą się wahać od 0 do 1;

Oto prosty przykład zastosowania dla styli filter i border-radius elementu img:

Listing 1
  1. <style>
  2. img.gray
  3. {
  4. -webkit-filter: grayscale(100%);
  5. filter: grayscale(100%);
  6. transition-property: filter, border-radius;
  7. transition-duration: 1s;
  8. transition-timing-function: linear;
  9. display:block;
  10. margin: auto;
  11. width: 50%;
  12. height: 50%;
  13. border: 1px solid #aaaaaa;
  14. border-radius: 5px;
  15. padding: 5px;
  16. box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5);
  17. }
  18. img.gray:hover
  19. {
  20. -webkit-filter: grayscale(0%);
  21. filter: grayscale(0%);
  22. border-radius: 50%;
  23. }
  24. </style>
  25. <img class="gray" src="rysunki/Panorama.jpg" alt="panorama"/>

Efekt działania powyższego kodu:

panorama
Tematy powiązane

Komentarze