Animacja CSS: Słoneczna Barka Faraona

W starożytnym Egipcie, słoneczna barka była symbolem podróży boga słońca Ra przez niebo. Wyobraźmy sobie, że chcemy animować taką barkę, przesuwającą się przez ekran, ale chcemy, żeby zaczęła się poruszać po pewnym opóźnieniu.

Krok 1: Zdefiniowanie @keyframes

Najpierw zdefiniujemy animację, która przesuwa barkę w poziomie:

1@keyframes sail {
2  0% { left: 0; }
3  100% { left: 100%; }
4}

Krok 2: Stosowanie Animacji z

animation-delay

Teraz zastosujemy tę animację do elementu reprezentującego barkę, dodając opóźnienie 3 sekundy:

1.solar-barge {
2  position: absolute;
3  animation: sail 10s linear infinite;
4  animation-delay: 3s; /* Opóźnienie 3 sekundy */
5}

Element z klasą

solar-barge

będzie teraz animowany z opóźnieniem 3 sekundy, co oznacza, że pozostanie nieruchomy przez te pierwsze 3 sekundy, a potem zacznie się przesuwać zgodnie z zdefiniowanym @keyframes.

HTML dla Barki

Twój HTML może wyglądać tak, aby reprezentować barkę:

1<div class="solar-barge">
2  <img src="solar-barge.png" alt="Słoneczna Barka Faraona">
3</div>

Podsumowanie

Właściwość

animation-delay

w CSS jest użytecznym narzędziem do dodawania opóźnienia do animacji, co pozwala na bardziej złożone i wyrafinowane efekty. Przykład z Słoneczną Barką Faraona pokazuje, jak można tę technikę wykorzystać do tworzenia ciekawych i tematycznych animacji.