poniedziałek, 21 października 2013

Animacja na stronie bez użycia Flash selektor Animation CSS3

Selektor Animation umożliwia np. stworzenie prostego baneru który będzie się przesuwał podczas przeglądania strony podobnie jak w przypadku "spadających" reklam zrobionych we Flashu.
Najważniejsze wartości w poniższy przykładzie to:
  • nazwa która będzie identyfikatorem naszej animacji oraz czas przejścia
  • właściwość keyframes określająca od jakiego miejsca ma zacząć się animacji i w którym kierunku ma się przesuwać obiekt (np. left, top)
  • na chwilę obecną należy również pamiętać o umieszczeniu alternatywnego selektora dla przeglądarki Chrome 
Kod można pobrać stąd poniżej znajduje się film pokazujący działanie selektora. Kod działa poprawnie na przeglądarkach: Firefox 24.00, Chrome 30.0.1599.101 m, Internet Explorer 10, Opera 12.16 kod nie działa na Safari 5.1.7