CSS动画

CSS动画

CSS może realizować animacje elementów HTML bez użycia JavaScript lub Flash!

CSS

W tym rozdziale nauczysz się takich właściwości:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Wsparcie przeglądarek dla animacji

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Właściwości Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Co to jest animacja CSS?

Animacja pozwala na stopniowe zmienianie stylu elementu z jednego na inny.

Możesz dowolnie zmieniać dowolną liczbę atrybutów CSS.

Aby użyć CSS animacji, musisz najpierw określić kilka kluczowych ramek.

Kluczowe ramy zawierają style, które element ma w określonych momentach.

@keyframes zasady

Jeśli w @keyframes Zasady określają style CSS, które będą stopniowo zmieniać się w określonym czasie z bieżącego stylu na nowy styl.

Aby animacja działała, musi być przypisana do jakiegoś elementu.

Poniższy przykład przypisuje animację "example" do elementu <div>. Animacja potrwa 4 sekundy, podczas której kolor tła elementu <div> będzie stopniowo zmieniał się z czerwonego na żółty:

Przykład

/* Kody animacji */
@keyframes example {
  from {background-color: red;}
  do {background-color: yellow;}
}
/* applying animation effects to this element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Uwaga:animation-duration Atrybut definiuje, jak długo trwa animacja. Jeśli nie określono animation-duration Jeśli nie określisz wartości dla atrybutu, animacja nie zostanie uruchomiona, ponieważ domyślna wartość to 0s (0 sekund).

W powyższym przykładzie, poprzez użycie słów kluczowych "from" i "to" (przedstawiających 0% (rozpoczęcie) i 100% (zakończenie)), ustawiliśmy, kiedy styl ma się zmieniać.

Możesz również używać wartości procentowych. Dzięki użyciu procentów, możesz dodać dowolną liczbę zmian stylu.

Poniższy przykład zmieni kolor tła elementu <div> na żółty, gdy animacja osiągnie 25%, 50% oraz 100%.

Przykład

/* Kody animacji */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementy, na które aplikowana jest animacja */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Poniższy przykład zmieni kolor tła i pozycję elementu <div> w 25%, 50% i 100% ukończenia animacji:

Przykład

/* Kody animacji */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Elementy, na które aplikowana jest animacja */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Opóźnienie animacji

animation-delay Atrybut określa czas opóźnienia zanim animacja rozpocznie się odtwarzanie.

Poniższy przykład ma 2-sekundowy opóźnienie przed rozpoczęciem animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Spróbuj sam!

Dopuszczalne są wartości ujemne. Jeśli używa się wartości ujemnych, animacja rozpocznie się, jakby była już odtwarzana przez N sekund.

W poniższym przykładzie, animacja rozpocznie się, jakby już była odtwarzana przez 2 sekundy:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Spróbuj sam!

Ustawienie liczby razy, przez które animacja powinna być uruchomiona

animation-iteration-count Atrybut określa, ile razy animacja powinna być uruchomiona.

Poniższy przykład uruchamia animację 3 razy przed zatrzymaniem:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Spróbuj sam!

Poniższy przykład używa wartości "infinite", aby animacja trwała wiecznie:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Spróbuj sam!

Odtwarzanie animacji w przeciwnym kierunku lub w sposób cykliczny

animation-direction Atrybut określa, czy animacja ma być odtwarzana do przodu, do tyłu czy w sposób cykliczny.

animation-direction Atrybut może przyjąć następujące wartości:

  • normal - Animacja odtwarzana normalnie (do przodu). Domyślna wartość
  • reverse - Animacja odtwarzana w przeciwnym kierunku (do tyłu)
  • alternate - Animacja najpierw odtwarzana do przodu, a następnie do tyłu
  • alternate-reverse - Animacja najpierw odtwarzana do tyłu, a następnie do przodu

Poniższy przykład pokaże animację运行的相反方向（向后）：

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Spróbuj sam!

Poniższy przykład używa wartości "alternate", aby animacja najpierw chạyła do przodu, a następnie do tyłu:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Spróbuj sam!

Poniższy przykład używa wartości "alternate-reverse", aby animacja najpierw chạyła wstecz, a następnie do przodu:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Spróbuj sam!

Określa krzywą prędkości animacji

animation-timing-function Atrybut określa krzywą prędkości animacji.

animation-timing-function Atrybut może przyjąć następujące wartości:

  • ease - Określ animację, która zaczyna się wolno, potem przyspiesza, a potem znów zwalnia (domyślna)
  • linear - Określ animację, w której prędkość zaczyna się i kończy jest taka sama
  • ease-in - Określ animację, która zaczyna się wolniej
  • ease-out - Określ animację, która kończy się wolniej
  • ease-in-out - Określ animację, która zaczyna się i kończy wolniej
  • cubic-bezier(n,n,n,n) - Uruchom swoje wartości zdefiniowane w trójstopniowej funkcji Béziera

Poniższe przykłady pokazują różne krzywe prędkości, które można użyć:

Przykład

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Spróbuj sam!

Określa tryb wypełniania animacji

CSS animacje nie wpłyną na element przed odtworzeniem pierwszej kluczowej klatki ani po odtworzeniu ostatniej kluczowej klatki.animation-fill-mode atrybut może nadpisać to zachowanie.

W czasie, gdy animacja nie jest odtwarzana (przed rozpoczęciem, po zakończeniu, lub po obu końcach),animation-fill-mode Atrybut określa styl elementu docelowego.

Atrybut animation-fill-mode może przyjąć następujące wartości:

  • none - Domyślna wartość. Animacja nie będzie aplikować żadnych stylów na element przed lub po jej wykonaniu.
  • forwards - Element zachowa wartości stylu ustawione w ostatniej kluczowej klatce (zależne od animation-direction i animation-iteration-count).
  • backwards - Element uzyska wartości stylu ustawione w pierwszej kluczowej klatce (zależne od animation-direction) i zachowa tę wartość w czasie opóźnienia animacji.
  • both - Animacja będzie jednocześnie przestrzegać zasad wstecznego i przyszłego, rozszerzając właściwości animacji w obu kierunkach.

Poniższy przykład pokazuje, jak element <div> zachowuje wartości stylu z ostatniego kluczowego klatki po zakończeniu animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Spróbuj sam!

Poniższy przykład ustawia wartości z pierwszego kluczowego kadrów dla elementu <div> przed rozpoczęciem animacji (w okresie opóźnienia animacji):

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Spróbuj sam!

Poniższy przykład ustawia wartości stylu z pierwszego kluczowego kadrów dla elementu <div> przed rozpoczęciem animacji oraz zachowuje wartości ostatniego kluczowego kadrów po zakończeniu animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Spróbuj sam!

Skrócone atrybuty animacji

Poniższy przykład używa sześciu atrybutów animacji:

Przykład

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Spróbuj sam!

Użycie skróconej wersji animation Atrybuty mogą również osiągnąć ten sam efekt animacji jak w poprzednim przykładzie:

Przykład

div {
  animation: example 5s linear 2s infinite alternate;
}

Spróbuj sam!

Atrybuty CSS animacji

Poniższa tabela pokazuje reguły @keyframes oraz wszystkie atrybuty CSS animacji:

Właściwości Opis
@keyframes Zdefiniowanie trybu animacji.
animation Ustawienie skróconej wersji wszystkich właściwości animacji.
animation-delay Zdefiniowanie opóźnienia startu animacji.
animation-direction Zdefiniowanie, czy animacja ma być odtwarzana do przodu, do tyłu czy w obie strony.
animation-duration Zdefiniowanie czasu potrzebnego na zakończenie jednego cyklu animacji.
animation-fill-mode Zdefiniowanie stylu elementu, gdy animacja nie jest odtwarzana (przed startem, po zakończeniu lub oba jednocześnie).
animation-iteration-count Zdefiniowanie liczby razy, na które animacja ma być odtwarzana.
animation-name Zdefiniowanie nazwy animacji @keyframes.
animation-play-state Określa, czy animacja jest uruchamiana czy zatrzymywana.
animation-timing-function 规定动画的速度曲线。