Pytania otagowane jako css-animations

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.

4
Utrzymanie końcowego stanu na końcu animacji CSS3
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 naturalne myślenie byłoby takie, że animowane elementy utrzymują stan końcowy, …
10
Jak zrobić migający / migający tekst za pomocą CSS 3
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: 1.7s; } Miga, ale miga tylko „w jednym kierunku”. To znaczy, tylko zanika, a potem pojawia się ponownie opacity: 1.0, …
11
animacja przejścia css3 przy ładowaniu?
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 elementach. Działa tylko po najechaniu myszą. Klatka kluczowa CSS3 działa przy obciążeniu, ale działa …
8
Zatrzymywanie animacji CSS3 na ostatniej klatce
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, …
8
CSS3 Spin Animation
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: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: …
9
CSS: animacja a przejście
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 będę mieć niezłą animację. Istnieją jednak przypadki, …
9
Imitowanie migającego tagu z animacjami CSS3
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, jak zastąpić …
30
Rozmyty tekst po użyciu transformacji CSS: scale (); w przeglądarce Chrome
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); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Jeśli …
5
Odtwarzaj wiele animacji CSS w tym samym czasie
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; height: 120px; margin:-60px 0 …
4
Właściwość CSS Animation pozostaje po animacji
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 skrzypcach ... http://jsfiddle.net/GZx6F/ Oto kod do konserwacji …
9
Zmiana: najedź, aby dotknąć / kliknąć w przypadku urządzeń mobilnych
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 chwili: http://jsfiddle.net/danieljoseph/3p6Kz/ Jak widać,: …
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.