Najlepszy samouczek animacje CSS3 W 2024 r. W tym samouczku możesz dowiedzieć się animacje CSS3,CSS3 @keyframes zasady,Pomoc Browser,Przykłady,animacje CSS3,Przykłady,Jakie są animacje CSS3?,Przykłady,Przykłady,Właściwości animacji CSS3,Przykłady,Przykłady,
CSS3, możemy tworzyć animacje, które mogą zastąpić wiele stron animowanych obrazów, animacji Flash i JavaScript.
Aby utworzyć animacje CSS3, będziesz musiał nauczyć się zasad @keyframes.
@keyframes regułą jest tworzenie animacji. Określ styl CSS i animacja będzie stopniowo przejść do nowego stylu z bieżącego stylu w obrębie zasad @keyframes.
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Podczas tworzenia @keyframes animacji, powiązać go z selektora, inaczej animacja będzie miał żadnego wpływu.
Podaj co najmniej dwie właściwości animacji CSS3 jest związany z selektora:
W "myfirst" animacja przywiązany do elementu div Czas trwania: 5 sekund:
Uwaga: Należy określić czas trwania nazwą animacji i animacji.Jeśli pominąć czas trwania animacji nie będzie działać, ponieważ wartość domyślna to 0.
Animacja jest elementem dokonać stopniowego przechodzenia z jednego stylu na inny efekt stylu.
Można zmienić tak wiele stylów, jak wiele razy.
Proszę kliknąć na procentową zmianę w wyznaczonym terminie lub słowa kluczowego "z" i "do", co odpowiada 0% do 100%.
0% to początek animacji, animacja jest w 100% kompletne.
Dla najlepszego wsparcia przeglądarki, zawsze należy zdefiniować 0% i 100% selektora.
Zmiana koloru tła, gdy animacja jest 25% i 50% i 100% ukończone, gdy animacja znowu się zmienił:
Zmienić kolor tła i miejsce:
W poniższej tabeli przedstawiono zasady @keyframes i wszystkie właściwości animacji:
nieruchomość | opis | CSS |
---|---|---|
@keyframes | Przepisy animacja. | 3 |
ożywienie | Skrócona forma dla wszystkich właściwości animacji, oprócz właściwości animacji play-państwowej. | 3 |
animacja-name | Określa animację nazwa @keyframes. | 3 |
animacja-czas | Przepisy animacja trwa do ukończenia cyklu sekund lub milisekund. Wartość domyślna to 0. | 3 |
animacja-timing-function | Określona szybkość krzywej animacji. Domyślną wartością jest "łatwość". | 3 |
animacja opóźnienia | Gdy określona animacja zaczyna. Wartość domyślna to 0. | 3 |
animacja-iteracja-count | Określoną liczbę razy animacja jest odtwarzana. Wartość domyślna to 1. | 3 |
animacja-kierunek | Niezależnie od postanowień animacji grać w odwrotnej kolejności do następnego cyklu. Domyślnie jest to "normalne". | 3 |
animacja-play-state | Niezależnie od postanowień animacji jest uruchomiony lub wstrzymany. Domyślną wartością jest "systemem". | 3 |
Poniższe dwa przykłady ustawić wszystkie właściwości animacji:
Uruchom myfirst animacji, ustawić wszystkie atrybuty:
Animacja wyżej to samo, ale z krótkich animowanych właściwości animacji: