Podobne tutoriale:

Wprowadzenie do animacji CSS3 - An introduction to CSS3 animations
Wprowadzenie do przejścia CSS3 - An introduction to CSS3 transitions
Korzystanie CSS3 przekształcić, aby powiększyć obraz - Using CSS3 transform to zoom an image
Uruchomienie i zatrzymanie animacji CSS3 przy pomocy zdarzeń

Domyślnie po przypisaniu animacji do obiektu będzie ona działać w sposób ciągły i tylko jedna animacja może być używana na obiekt.
Jednakże można użyć stylów i dynamicznie przydzielać animację do obiektu lub nawet je przełączać!
Zanim przeczytasz ten tutorial zalecamy abyś przeczytał ze zrozumieniem (jeśli tego jeszcze nie zrobiłeś) poniższe tutoriale powiązane tematycznie:
Korzystanie z Menedżera stylów
Wprowadzenie do animacji CSS3
Krok 1
Utwórz nowy styl w Menedżerze stylów . Możesz nadać mu nazwę np. "animation1".
Przejdź do sekcji animacji i wybierz typ animacji z sekcji Animation. Określ także inne wartości,  jak czas trwania i liczby iteracji.
Krok 2

Wstaw obrazek. Zapamiętaj identyfikator (zapewne będzie to "Image1").
Krok 3

Dodaj Kształt, będzie on wykorzystany do uruchamiania animacji.
Krok 4

We właściwościach kształtu  dodaj nowe zdarzenie "onclick" .
Ustaw jego Akcję na "Set Style", a jako cel ustaw "'Image1" i nazwę stylu na" animation1 ".
Krok 5

Użyj podglądu lub opublikuj stronę, aby przetestować animację (klikając na Kształt).
Krok 6

Aby zatrzymywaćć animację utworzymy jeszcze jeden styl.
Utwórz więc jeszcze jeden styl w menedżerze stylów. Nazwij go na przykład  "no_animation". Nie zmieniaj ustawionych wartości domyślnych.
Krok 7

Utwórz obiekt Kształt , a we właściwościach tego obiektu dodaj nowe zdarzenie "onclick" .
Ustaw działanie na "Set Style". Jako cel ustaw "image1" i wybierz styl "no_animation".
Demo




Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017