Dynamiczne CSS: transformuj obiekty

Animacja elementów strony może funkcjonować jako niezależny proces lub uruchamiać wizualizację działań odwiedzających. W obu przypadkach transformacja CSS elementu nie wpływa na ogólny przepływ i jest wykonywana niezależnie od zawartości strony jako całości.

Przy stosowaniu zasad i rozwijaniu logiki zmian elementów bardzo ważne jest stosowanie poprawnych wartości właściwości i reguł. Transformacja CSS nie daje deweloperowi możliwości kontrolowania. Wszystkie transformacje są wykonywane zgodnie z zadanymi funkcjami i ich wartościami.


Ogólne zasady transformacji

Logika ucieleśniona w idei funkcji transformacji, polegająca na zniekształceniu elementu. Elementy strony są prostokątne, nawet jeśli reprezentuje je gładka grafika w środku. Zmieniając rozmiar boków lub ich przemieszczenie (przemieszczenie) może być:
  • uformowaną dynamiką;
  • perspektywa jest tworzona;
  • Wykonana objętość.
  • W każdym przypadku wszystkie transformacje występują na płaszczyźnie, ale wynik jest możliwy zarówno w widoku 2D, jak i 3D. W poniższym przykładzie są cztery obszary, każdy z CSS - transformacja.
    Górny rząd obrazów jest oryginałem, dolny wiersz jest wynikiem użycia funkcji. Aby zademonstrować podstawowe funkcje, użyj poniższego opisu CSS i pokaż wstawienie w kodzie HTML strony.
    W tym przykładzie transformacja następuje po najechaniu myszą na element i przypisaniu go za pomocą pseudoklasy: hover. W odniesieniu doprzekształcić właściwości pomocą funkcji tłumaczyć należy zauważyć, że transformacja CSS można zastąpić pozostawione nieruchomości i góry. Jeśli chodzi o zniekształcenie funkcji pochylania - wynik może być nieprzewidywalny.


    Uważa się, że przekrzywienie jest rzadko używany, ale poprawne i kompleksowe zastosowanie animacji CSS pochylać zbuduje rozpędu w przestrzeni trójwymiarowej przez elementu jazdy. Na przykład, „statek kosmiczny na orbicie” w kontekście strony internetowej może być przepływ towarów na wystawie w przestrzeni sklepowej.

    Perspektywa transformacji

    przekształcenia tekstu w CSS może zapewnić efekty specjalne z perspektywy. Przykład pokazuje, jak normalną reprezentację tekstową można przekonwertować na pseudo-trihmer.
    Może to mieć sens w niektórych problemów, ale feedback użyteczność idea jest oczywista: można umieścić informacje w perspektywie, a gdy je przekształcić do normalnego trybu myszy. Jest kompaktowy i imponujący.
    Te przykłady transformacji są opisane w CSS w następujący sposób:
    zastosowanie własności przekształcania pochodzące od określić punkt, w którym w celu wykonania konwersji. Przesuwając ten punkt, możesz kontrolować centrum, dla którego wykonywana jest transformacja CSS. Funkcja obracania, chociaż ma dwie opcje - rotateX i rotateY - ale bez "X" i "Y" ma jeden parametr.
    We wszystkich przypadkach transformacja elementów powinna być uporządkowana na prostych przykładach, aby uniknąć nieoczekiwanych rezultatów. Lepiej najpierw poprawnie sformułować regułę i opisać właściwość dlaprosty element niż zawrzeć natychmiast w zakresie pożądanych przekształceń. Prawidłowe sformułowanie zasad i właściwości CSS jest kluczem do sukcesu i skutecznych wyników.

    Zastosuj właściwości animacji

    Animacja CSS za pomocą animacji i @keyframes uzupełnia możliwości transformacji, umożliwiając przekształcenie jej w rzeczywistą reprezentację poprzez kontrolowany ruch elementu lub kontrolowaną transformację jego formy.
    Górna linia elementów jest ich normalnym stanem. Pierwsza kolumna porusza się, druga jest obracana, a trzecia jest skalowana. Pokazano kilka ramek. Aby zaimplementować tę funkcjonalność, użyto następującego kodu:
    Dynamikę i długość procesu można ustawić w animacji i @ klatkach kluczowych. Dostępna jest płynna i stopniowa zmiana procesu. Możesz zastosować jednorodną zmianę i ruch z przyspieszeniem.

    Cechy właściwości animacji

    Właściwość animacji jest zazwyczaj zapisana w jednym wierszu. Zawiera osiem parametrów:
  • animation-name - nazwa animacji;
  • czas trwania animacji - czas trwania animacji (sekundy "ms", milisekundy ms ");
  • animacja - funkcja czasu - rodzaj animacji (łatwość, liniowość, łatwość, łatwość, łatwość wchodzenia na zewnątrz, sześcienny zakres);
  • liczba iteracji animacji - liczba animacji powtarzających się lub nieskończonych;
  • kierunek animacji - kierunek ruchu (normalny, wsteczny, naprzemienny, naprzemienny - wsteczny);
  • animation-play-state - zatrzymaj animację (uruchom, wstrzymaj);
  • opóźnienie animacji - opóźnienie animacji przed odtwarzaniem (sekundy "s", milisekundę "ms");
  • tryb wypełniania animacji - odtwarzanie animacji poza określonym czasem odtwarzania (
  • brak, do przodu, do tyłu, oba);
  • Podczas projektowania animacji za pomocą właściwości animacjiTransformacje są wskazane w regule @keyframes, która definiuje sekwencję transformacji elementów krokami.

    Ważne opcje animacji

    Każda animacja ma nazwę, czas trwania i typ. Po nazwie definiowany jest pożądany opis @klawiatury, czas trwania określa czas trwania procesu, a typ jest wariantem ruchu.
    Jeżeli jest potrzebna jednolita procedura (ruch i /lub transformacja), wartość jest liniowa. Jeśli chcesz mieć przyspieszenie na początku - łatwość, jeśli na końcu - łatwość wejścia. Łatwość wślizguje się, a łatwość wchodzenia na zewnątrz to bardziej płynna opcja.
    Wartość cubic-bezier pozwala sformułować złożoną wersję ruchu i stworzyć bardziej oryginalną wersję animacji.
    Na stronie producenta możesz wybrać dowolną standardową wersję projektu i zaprojektować własną. Po kliknięciu przycisku "GO!" Dwa kwadraty poruszają się równolegle i można dopasować różnice i wizualizować pożądane zachowanie elementu.

    Tworzenie ramki animacji

    Właściwość @keyframes jest "wyznacznikiem" ramek (patrz przykład powyżej), przez który element się transformuje. Idea nieruchomości jest bardzo prosta, ale możliwości, jakie zapewnia, są ogromne. Proces rozpoczyna się od 0% i kończy się 100% całkowitego czasu przydzielonego animacji. Możesz używać tylko punktów końcowych zi do, lub 0% i 100%. Większy efekt można osiągnąć, dzieląc cały proces animacji /transformacji w witrynie. Wielkość działki może być dowolna. Zazwyczaj akceptowanych jest kilka opcji: 0%, 25%, 50%, 75% i 100%. Czasem wystarczają tylko trzy ramki: 0%, 50% i 100%. Jak to zrobić w każdym przypadkuzależy od zadania i programisty.
    Przy konstruowaniu dowolnego wariantu transformacji należy przestrzegać jednej podstawowej zasady. Nie zawsze dopuszczalne jest używanie javascript, szczególnie w przypadku programowalnej zmiany właściwości elementów, na przykład zmiana wartości właściwości background-image. HTML, CSS i javascript idealnie się łączą, ale we wszystkich przypadkach trzeba wziąć pod uwagę faktyczną funkcjonalność każdego z tych komponentów. Idealnie, gdy pracują w przejrzystej kombinacji i nie ingerują w siebie nawzajem.

    Powiązane publikacje