Poniżej nie jeden, ale trzy warianty kodu pozwalające na animowanie ikony. Dla uproszczenia wykorzystany jest Font Awesome, ale dowolna czcionka z ikonami się nada. Można też poszaleć i użyć innych form budowania kształtu, ale wtedy animowania wymagać mogą inne atrybuty.
Pierwszy kod poniżej opiera się na prostej animacji i pozwala animować ikonę po najechaniu.
Kod jest niezwykle prosty i wykorzystuje jedną animację. Problem w tym, że ikona wraca do swojego stanu już po opuszczenia kursora, bez animacji. Na ratunek przychodzi drugie rozwiązanie:
Tym razem nie używamy animacji, a tranzycję. Wskazujemy, że zmiana atrybutu color jest wykonywana w formie przejścia trwającego 500[ms]. Tranzycja zawsze trwa tyle samo czasu, więc powrót ze stanu :hover do normalnego również wywołuje animację koloru.
Trzecie rozwiązanie pozwala na uzyskanie tego samego efektu co poprzednio, ale pozwala na zastosowanie innego czasu animacji po najechani i innego po opuszczeniu elementu.
Jest to przypadek, gdy potrzebujemy użyć nieco kodu JS. W rzeczywistości zdefiniowane mamy dwie animacje i przełączając klasy, wywołujemy raz jedną, raz drugą animację. Potrzebujemy dwóch animacji, ponieważ jeśli animacja ma wykonać się tylko raz, nie można uruchomić jej ponownie bez użycia trików i odrobiny magii.
Mam nadzieję, że ten krotki post z kilkoma przykładami zachęci do zabawy z animacjami w CSS. W prawdzie w dobie frameworków takich jak Bootstrap ekspertów od CSS jest mało (i sam się do nich nie zaliczę), jednak parę trików warto znać.
Edit: jak widać eksperymentuję z osadzaniem w postach kodu z jsfiddle, ale chyba zakładka z wynikiem nie działa jak należy. Dlatego polecam przykłady otwierać bezpośrednio w jsfiddle, a ja tymczasem poszukam innej wygodnej usługi tego rodzaju.
Brak komentarzy:
Prześlij komentarz