Animacje CSS umożliwiają animację przejść z jednej konfiguracji stylu CSS do innej. Moduł CSS opisuje sposób, w jaki autorzy mogą animować wartości właściwości CSS w czasie za pomocą klatek kluczowych. Zachowanie tych animacji klatek kluczowych można kontrolować, określając ich czas trwania, liczbę powtórzeń i powtarzalne zachowanie.
Uruchomiam animację na niektórych elementach ustawionych opacity: 0;w CSS. Klasa animacji jest stosowana naClick i, używając klatek kluczowych, zmienia krycie z 0na 1(między innymi). Niestety po zakończeniu animacji elementy wracają do opacity: 0(zarówno w przeglądarce Firefox, jak i Chrome). Moje...
Obecnie mam ten kod: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration:...
Czy można używać animacji przejścia CSS3 przy ładowaniu strony bez użycia Javascript? To jest coś, czego chcę, ale przy ładowaniu strony: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Co znalazłem do tej pory CSS3 opóźnienie przejścia , sposób na opóźnienie efektów na...
Mam 4-częściową animację CSS3 odtwarzaną po kliknięciu - ale ostatnia część animacji ma na celu zdjęcie jej z ekranu. Jednak po odtworzeniu zawsze wraca do pierwotnego stanu. Każdy wie, jak mogę go zatrzymać na ostatniej ramce css (100%) , a także, jak pozbyć się całego diva, w którym on gra, gdy...
Przejrzałem kilka wersji demonstracyjnych i nie mam pojęcia, dlaczego nie mogę sprawić, aby spin CSS3 działał. Używam najnowszej stabilnej wersji Chrome. Skrzypce: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name:...
Rozumiem więc, jak wykonywać przejścia i animacje CSS3. Nie jest jasne, a wyszukałem w Google, kiedy użyć którego. Na przykład, jeśli chcę, aby piłka odbiła się, jasne jest, że najlepszym rozwiązaniem jest animacja. Mógłbym dostarczyć klatki kluczowe, a przeglądarka zrobiłaby klatki pośrednie i...
Naprawdę chcę, aby fragment tekstu migał w starym stylu bez używania javascript lub dekoracji tekstu. Żadnych przejść, tylko * mrugnięcie *, * mrugnięcie *, * mrugnięcie *! EDYCJA : To różni się od tego pytania, ponieważ proszę o mruganie bez ciągłych przejść, podczas gdy OP innych pytań pyta,...
Wygląda na to, że ostatnia aktualizacja przeglądarki Google Chrome powoduje rozmazany tekst po wykonaniu pliku transform: scale(). W szczególności robię to: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); }...
Jak mogę mieć dwie animacje CSS odtwarzane z różnymi prędkościami ? Obraz powinien obracać się i rosnąć w tym samym czasie. Rotacja będzie się zmieniać co 2 sekundy. Wzrost będzie cykliczny co 4 sekundy. Przykładowy kod: .image { position: absolute; top: 50%; left: 50%; width: 120px;...
Coś tak prostego powinno być łatwe do osiągnięcia, ale wyrywam sobie włosy z tego, jak skomplikowane jest to. Chcę tylko animować montaż i odmontowywanie komponentu Reacta, to wszystko. Oto, czego próbowałem do tej pory i dlaczego każde rozwiązanie nie działa: ReactCSSTransitionGroup - W...
Próbuję, aby właściwość animacji CSS pozostała po zakończeniu, czy to możliwe? To właśnie próbuję osiągnąć ... Element powinien być ukryty, gdy użytkownik wyląduje na stronie, po 3 sekundach (lub czymkolwiek) powinien zniknąć, a po zakończeniu animacji powinien tam pozostać. Oto próba gry na...
Próbuję stworzyć animację wielokropka i zastanawiałem się, czy jest to możliwe z animacjami CSS ... Więc może być tak Loading... Loading.. Loading. Loading... Loading.. I po prostu kontynuuj w ten sposób. Jakieś pomysły? Edycja: w ten sposób:
Rozejrzałem się, ale nie mogę znaleźć tego, czego szukam. Obecnie mam na swojej stronie animację css, która jest wywoływana przez: hover. Chciałbym, aby to zmieniło się na „kliknięcie” lub „dotknięcie”, gdy rozmiar strony przekroczy 700 pikseli przy użyciu zapytań o media. Oto, co mam w tej...
Próbuję utworzyć animację w stylu roller coaster z CSS. Chcę wiedzieć, jak zakrzywiać „kolejkę”, gdy jest ona w fazie pętli. Poszukuję całego rozwiązania CSS, ale jeśli potrzebuję trochę kodu JavaScript, nie mam nic przeciwko. mój kod do tej pory: #container { width: 200px; height: 300px;...