Aby zrozumieć strukturę naszych znaczników, skupmy się przez chwilę na łodzi:

>

>
>
>

Spójrzmy teraz na pierwszy baner na stronie demonstracyjnej. Na statku odbywają się trzy oddzielne animacje:

• Animacja - gdy łódź ślizga się z lewej strony. Dotyczy to bezpośrednio listy nieuporządkowanej (grupy elementów łodzi).
• Animacja - która nadaje łodzi efekt kołysania, symulując łódź unoszącą się na wodzie. Dotyczy to bezpośrednio elementów listy (do łodzi).
• Animacja - ukrywająca znak zapytania. Dotyczy to div (znaku zapytania).

Jeśli nie dostaniesz choroby morskiej, spójrz ponownie na stronę demonstracyjną. Zobaczysz, że animacja zastosowana do elementu listy (łodzi), powodująca podniesienie łodzi, wpływa również na znajdujący się w niej element DIV (ze znakiem zapytania). Ponadto animacja „wsuwania się” zastosowana do nieuporządkowanej listy (grupy) wpływa również na element listy i znajdujący się w nim element DIV (łodzi i znak zapytania). To prowadzi nas do ważnych obserwacji:

Elementy potomne dziedziczą animację od swoich rodziców, oprócz własnej animacji. Ta wiedza została dodana do naszego arsenału, ale liczba dzieci/rodziców podczas tworzenia animacji rozwali Twój umysł (i procesor na laptopie Twojej babci)!

css

Zanim przejdziemy do naprawdę ciekawych rzeczy i zaczniemy tworzyć animacje, musimy jeszcze ostylować przeglądarki, które utknęły w XVIII wieku.

Style awaryjne dla starszych przeglądarek


Po prostu stworzymy style awaryjne tak, jakby animacja CSS nie istniała (pomysł, że animacja CSS nie istnieje, sprawi, że każdy dorosły nie tylko będzie płakał, ale zawisł obok mnie :)). Innymi słowy, jeśli nasza animacja się nie odtworzy, baner nadal powinien wyglądać przyzwoicie. W ten sposób, gdy ktoś wyświetli baner w starej przeglądarce, zobaczy normalny, statyczny baner zamiast pustej przestrzeni.

Na przykład: jeśli ktoś używa CSS w ten sposób, będą problemy:

/* ZŁA DROGA! */


0% ( krycie: 0 ; )
100% ( krycie: 1 ; )
}

Dyw (
krycie: 0 /* Ten blok jest domyślnie ukryty!*/

}

Jeśli przeglądarka użytkownika nie obsługuje animacji, baner pozostanie niewidoczny dla użytkownika. A wtedy klient wyłamie drzwi w biurze sprzedawcy - z piłą łańcuchową w ręku - i zażąda wyjaśnienia, dlaczego nie sprzedał swojego produktu! A jeśli nie zrozumieją, że przeglądarka może być tak nieszczęśliwa, ich życie skończy się strasznie, a ich ostatnimi słowami będą przekleństwa w Internet Explorerze... :)

Ale nie martw się, zapewnimy rozszerzoną obsługę przeglądarek:

/* WŁAŚCIWY SPOSÓB */

@keyframe nasza-zanikanie-animacji (
0% ( krycie: 0 ; )
100% ( krycie: 1 ; )
}

Dyw (
krycie: 1 /* ten div będzie domyślnie widoczny */
animacja: nasza animacja zanikania 1s 1 ;
}

Jak widać, DIV nadal będzie się pojawiał, nawet jeśli animacja nie zostanie odtworzona. Jeśli animacja może się odtworzyć, DIV zostanie natychmiast ukryty i animacja będzie odtwarzana do końca.

Teraz, gdy wiemy, jak sprawić, by nasze animowane banery obsługiwały starsze przeglądarki, przejdźmy do podstawowego CSS.

Należy pamiętać o trzech kluczowych kwestiach:

• Ponieważ te reklamy mogą być używane w różnych witrynach, sprawimy, że wszystkie nasze style CSS będą bardzo specyficzne. Zaczniemy deklarować każdy selektor z identyfikatorem: #ad-1. Dzięki temu nasze style banerów nie będą zakłócane przez istniejące style i elementy.
• Celowo będziemy zignoruj ​​funkcję opóźnienia animacji podczas tworzenia naszej animacji. Gdybyśmy mieli odpowiednio wykorzystać funkcję opóźnienia animacji, a także zaprojektować nasze elementy (domyślnie widoczne), to wszystko byłoby widoczne na ekranie, zanim animacja w końcu się odtworzy. Dlatego animacja uruchamia się natychmiast, co pozwala nam ukryć elementy z ekranu, dopóki ich nie potrzebujemy. Będziemy symulować opóźnienie animacji, zwiększając czas trwania i ręcznie dostosowując klatki kluczowe. Zobaczysz tego przykłady, gdy zaczniemy tworzyć animacje.
• Jeśli to możliwe, użyj jednej animacji dla wielu elementów. W ten sposób możemy zaoszczędzić sporo czasu i zredukować rozrost kodu. W tej samej animacji można utworzyć kilka różnych efektów, dostosowując czas trwania i przejścia.

Tak więc zaczniemy tworzyć nasz baner reklamowy. Upewnijmy się, że ma pozycję względną (pozycja: względna), aby elementy wewnątrz niej mogły być umieszczone poprawnie. Musimy również upewnić się, że właściwość overflow: hidden jest ustawiona na ukrywanie wszystkiego innego:

#ad-1 (
szerokość: 720px
wysokość: 300px
pływak : lewy ;
margines : 40px auto 0 ;
obraz w tle : url (../images/ad-1/background.png ) ;
pozycja tła : środek ;
background-repeat : bez powtórzeń ;
przepełnienie: ukryte
pozycja : względna ;
box-shadow: 0px 0px 6px #000 ;
}

#ad-1 #treść(
szerokość: 325px
pływak : prawo ;
margines : 40px ;
wyrównanie tekstu : środek ;
z-indeks : 4 ;
pozycja : względna ;
przelew: widoczny
}
#ad-1 h2 (
rodzina czcionek : "Alfa Slab One" , kursywa ;
kolor : #137dd5 ;
rozmiar czcionki : 50px ;
wysokość linii : 50px ;

animacja: animacja opóźnionego zanikania 7s 1 easy-in-out; /* H2 zniknie z symulowanym opóźnieniem animacji */
}
#ad-1 h3 (

kolor : #202224 ;
rozmiar czcionki : 31px ;
wysokość linii : 31px ;
cień tekstowy : 0px 0px 4px #fff ;
animacja: animacja opóźnionego zanikania 10 s 1 złagodzenie; /* H3 zniknie z symulowanym opóźnieniem animacji */
}
Formularz #ad-1 (
margines : 30px 0 0 6px ;
pozycja : względna ;
animacja: forma-animacja 12s 1 easy-in-out; /* Ten kod przenosi nasz formularz e-mail */
}
#ad-1 #e-mail (
szerokość : 158px ;
wysokość : 48px ;
pływak : lewy ;
wypełnienie: 020px
rozmiar czcionki : 16px ;
rodzina czcionek : "Lucida Grande" , bezszeryfowa ;
kolor : #fff ;
cień tekstowy : 1px 1px 0px #a2917d ;
obramowanie-górny-lewy-promień: 5px ;
obramowanie-dolny-lewy-promień: 5px ;
obramowanie: 1px stałe #a2917d;
zarys : brak ;
box-shadow: -1px -1px 1px #fff ;
kolor tła : #c7b29b ;
background-image : linear-gradient(bottom , rgb (216 , 201 , 185) 0% , rgb (199 , 178 , 155) 100% );
}
#ad-1 #e-mail :skup się (
background-image : linear-gradient(bottom , rgb (199 , 178 , 155) 0% , rgb (199 , 178 , 155) 100% );

}
#ad-1 #prześlij (
wysokość: 50px
pływak : lewy ;
kursor : wskaźnik ;
wypełnienie: 020px
rozmiar czcionki : 20px ;
rodzina czcionek : "Boogaloo" , kursywa ;
kolor : #137dd5 ;
cień tekstowy : 1px 1px 0px #fff ;
obramowanie-prawy-górny-promień: 5px ;
border-bottom-right-promień: 5px ;
obramowanie : 1px stałe #bcc0c4 ;
obramowanie po lewej : brak
kolor tła : #fff ;
background-image : linear-gradient(bottom , rgb (245 , 247 , 249) 0% , rgb (255 , 255 , 255 ) 100% ) ;
}
#ad-1 #prześlij :najedź (
background-image : linear-gradient(bottom , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% ) );
}

Teraz nadamy styl wodzie i wywołamy odpowiednią animację:

#ad-1 ul#woda (
/* Gdybyśmy chcieli dodać kolejną animację dla wody (na przykład poruszania się w poziomie), moglibyśmy to zrobić tutaj */
}
#ad-1 li#powrót wody (
szerokość: 1200px
wysokość : 84px ;
obraz w tle : url (../images/ad-1/water-back.png ) ;

z-indeks : 1 ;
pozycja : bezwzględna ;
dół: 10px
lewy : -20px
animacja: animacja powrotu wody 3s nieskończona łatwość-in-out; /* Efekt odbijania wody */
}
#ad-1 li#front nawodny (
szerokość: 1200px
wysokość : 158px ;
obraz w tle : url ( ../images/ad-1/waterfront.png) ;
powtarzanie w tle : powtarzanie-x ;
z-indeks : 3 ;
pozycja : bezwzględna ;
dół : -70px ;
lewo : -30px
animacja: animacja frontu wody 2s nieskończona łatwość-in-out; /* Kolejny efekt odbijania wody - jest nieco inny. Zrobimy tę animację trochę szybciej, aby dać trochę perspektywy. */
}

Teraz stwórzmy style dla łodzi i wszystkich jej elementów. Ponownie wywołamy odpowiednią animację:

#ad-1 ul#łódź (
szerokość : 249px ;
wysokość: 215px
z-indeks : 2 ;
pozycja : bezwzględna ;
dół: 25px
po lewej: 20px
przelew: widoczny
animacja: animacja w łodzi 3s 1 luz; /* Przenieś grupę na początek */
}
#ad-1 ul#łódź li (
szerokość : 249px ;
wysokość: 215px
obraz w tle : url (../images/ad-1/łódź.png ) ;
pozycja : bezwzględna ;
dół: 0px
po lewej: 0px
przelew: widoczny
animacja: animacja łodzi 2s nieskończona łatwość-in-out; /* Imitacja łodzi podskakującej na wodzie - podobna animacja została już zastosowana dla samej wody. */
}
#ad-1 #znak zapytania (
szerokość: 24px
wysokość: 50px
obraz w tle : url ( ../images/ad-1/question-mark.png) ;
pozycja : bezwzględna ;
prawo : 34px ;
góra : -30px ;
animacja: animacja opóźnionego zanikania 4s 1 złagodzenie; /* Ukryj znak zapytania */
}

Na koniec stworzymy style dla grupy chmur i dla jednej chmury. Uruchomimy też całkiem fajną animację, która zapewni im ciągły efekt przewijania. Oto ilustracja tego, co się stanie:



Oto style:

#ad-1 #chmury (
pozycja : bezwzględna ;
góra : 0px ;
Z-indeks : 0
animacja: animacja w chmurze 30s nieskończona liniowa; /* Przesuń chmury w lewo nieskończoną ilość razy */
}
#ad-1 #grupa-chmur-1 (
szerokość: 720px
pozycja : bezwzględna ;
po lewej: 0px
}
#ad-1 #grupa-chmury-2 (
szerokość: 720px
pozycja : bezwzględna ;
lewy : 720px ;
}
#ad-1 .chmura-1 (
szerokość: 172px
wysokość : 121px ;
obraz w tle : url (../images/ad-1 /cloud-1 .png) ;
pozycja : bezwzględna ;
góra : 10px ;
lewy : 40px ;
}
#ad-1 .chmura-2 (
szerokość : 121px ;
wysokość: 75px
obraz w tle : url (../images/ad-1 /cloud-2 .png) ;
pozycja : bezwzględna ;
góra : -25px ;
po lewej: 300px
}
#ad-1 .chmura-3 (
szerokość : 132px ;
wysokość: 105px
obraz w tle : url (../images/ad-1 /cloud-3 .png) ;
pozycja : bezwzględna ;
góra : -5px ;
lewy : 530px ;
}

Uff! Było tu dużo kodu CSS. Ale najciekawsze jest dalej!

Animacja


Pamiętaj: do tego momentu nie było żadnej animacji. Gdybyś teraz obejrzał baner, zobaczyłbyś coś, co wyświetliłaby nawet stara przeglądarka - statyczna reklama. ZTerazfaktycznie stworzymy animację, którą już wywołaliśmy w naszym kodzie CSS.

Teraz, gdy nasz baner dobrze się wyświetla, urozmaicmy tę statyczną reklamę! Przejdźmy od razu do kodu - w komentarzach opowiem co się wydarzy:

Wniosek

W trakcie tego samouczka poznaliśmy kluczowe punkty tworzenia animacji z obsługą starszych przeglądarek:

1. Elementy potomne dziedziczą animację swojego rodzica oprócz własnej animacji. Możemy to wykorzystać do tworzenia bardziej złożonych animacji.
2. Do stylizacji naszych reklam musimy używać bardzo konkretnych selektorów, aby nasze reklamy nie były zastępowane przez inne style witryn.
3. Musimy tak wystylizować elementy, aby jeśli nasza animacja się nie odtwarza, reklama nadal musi wyglądać przyzwoicie.
4. Jeśli to możliwe, używaj tej samej animacji dla wielu elementów - oszczędza czas i zapobiega rozrostowi kodu.
5. Często nazywamy Internet Explorera „przeglądarką z XVIII wieku”, jednocześnie potrząsając pięścią z obrzydzeniem i gniewem. :)

Powodzenia w eksperymentach CSS.

Zróbmy baner reklamowy za pomocą CSS3. Obecnie tylko przeglądarki Firefox i WebKit w pełni obsługują animacje CSS3. Wystarczy jednak, aby baner działał w innych przeglądarkach. Jednak nie oczekuj wszędzie świetnej wydajności (zwłaszcza w IE 7 i starszych), eksperymentując z najnowszymi technikami CSS.

Notatka: Aby zaoszczędzić miejsce na stronie, wszystkie prefiksy dostawców przeglądarki zostały pominięte. Zobacz kod źródłowy.

Znaczniki HTML

Przyjrzyjmy się najpierw strukturze banera w HTML. W tym momencie musimy sobie wyobrazić, jak animacja będzie działać:

Zaginiony?

Spokojnie - pomożemy.



Aby lepiej zrozumieć strukturę znaczników, skupmy się na łodzi:

Z łodzią występują trzy animacje:

Poślizg łodzi po lewej stronie. Dotyczy nieuporządkowanej listy (grupy).

Symulacja kołysania się łodzi na wodzie. Stosowany do pozycji listy (łódź).

Pojawienie się znaku zapytania. Stosowany do elementu div (znak zapytania).

Jeśli spojrzysz na stronę demonstracyjną, zobaczysz, że animacja elementu listy (łodzi) wpływa również na element div wewnątrz niej (znak zapytania). Również animacja „poślizgu” dla listy nieuporządkowanej wpływa na element listy (łodzi i znak zapytania).

W związku z tym można stwierdzić, że elementy potomne otrzymywać animacje rodziców oprócz własnych działań. Teraz pozostaje tylko wyliczyć struktury rodzic/dziecko.

css

Przed przystąpieniem do analizy tworzenia animacji należy podać wstecznie kompatybilny ze starszymi przeglądarkami.

Kompatybilność wsteczna

Zapewnimy kompatybilność wsteczną, po prostu stylizując znaczniki tak, jakby Animacje CSS w ogóle nie istnieje. Jeśli ktoś wyświetli stronę w starej przeglądarce, zobaczy normalny statyczny obraz, a nie pustą białą przestrzeń.

Na przykład: czy powinienem używać CSS? jak ten poniżej, pojawią się problemy:

/* NIE WŁAŚCIWIE! */ @keyframe nasza animacja zanikania ( 0% (przezroczystość:0;) 100% (przezroczystość:1;) ) div ( krycie: 0; /* Ten div jest domyślnie ukryty - ups!*/ animacja: nasza -fade-in-animation 1s 1; )

Jeśli przeglądarka nie obsługuje animacji, element div pozostanie niewidoczny dla użytkownika.

W ten sposób zapewniamy wsteczną kompatybilność ze starszymi przeglądarkami:

/* TRUE */ @keyframe nasza animacja zanikania ( 0% (przezroczystość:0;) 100% (przezroczystość:1;) ) div ( krycie: 1; /* Ten element div jest domyślnie widoczny */ animacja: nasza -fade-in-animation 1s 1; )

Teraz element div będzie renderowany, nawet jeśli animacja się nie powiedzie. I w nowoczesne przeglądarki Div zostanie najpierw ukryty podczas animacji.

Fundacja

Teraz wiemy, jak zapewnić kompatybilność wsteczną (co pomoże uniknąć problemów podczas pracy z rzeczywistymi projektami). Czas stworzyć bazę naszego kodu CSS.

Musisz zapamiętać 3 punkty:

Ponieważ baner będzie używany w różnych witrynach, sprawimy, że wszystkie nasze selektory CSS będą wyjątkowe. Wszystkie zaczynają się od #ad-1. Dlatego postaramy się uniknąć nakładania się naszego kodu i kodu strony.

Celowo ignorujemy opóźnienie animacji w ustawieniach. Jeśli użyjesz opóźnienia animacji podczas ustawiania stylów z domyślną widocznością elementów, to struktura banera zostanie zerwana przez nagłe zniknięcie lub pojawienie się części obrazu po zakończeniu animacji. Opóźnienie animacji jest symulowane przez czas trwania i ustawienie klatki.

Kiedy możliwe użyj jednej animacji dla kilku elementów. Dzięki temu oszczędzamy czas i zmniejszamy rozmiar kodu.

Dlatego tworzymy podstawę naszego banera. Ustawmy to na pozycjonowanie względne, aby elementy wewnętrzne mogły być umieszczone poprawnie. Ukryje również wszystko, co wykracza poza zakres elementu:

#ad-1 ( width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -repeat: no-repeat; overflow: ukryty; pozycja: względna; box-shadow: 0px 0px 6px #000; )

Następnie ustawiamy style dla pól tekstowych i wejściowych. Nazywamy odpowiednie animacje. Musisz również upewnić się, że zawartość ma najwyższy indeks Z dla ruchomych części, aby się nie nakładały:

#ad-1 #treść ( szerokość: 325px; float: prawo; margines: 40px; text-align: center; z-index: 4; pozycja: względna; overflow: widoczne; ) #ad-1 h2 ( font-family: "Alfa Slab One", kursywa; kolor: #137dd5; rozmiar czcionki: 50px; wysokość linii: 50px; cień tekstu: 0px 0px 4px #fff; animacja: animacja opóźnionego zanikania 7s 1 złagodzenie; /* Pojawia się h2 z fałszywym opóźnieniem */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animacja: opóźnione zanikanie animacji 10s 1 złagodzenie; /* Pojawienie się h3 z symulowanym opóźnieniem */ ) #ad-1 form (margines: 30px 0 0 6px; pozycja: względna; animacja: form-animation 12s 1 easy-in-out; /* Wysuń formularz, aby wprowadzić adres e-mail z symulowanym opóźnieniem */ ) #ad-1 #email ( szerokość: 158px; wysokość: 48px; float: lewo; dopełnienie: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; borde r-dolny-lewy promień: 5px; obramowanie: 1px stałe #a2917d; zarys: brak; box-shadow: -1px -1px 1px #fff; kolor tła: #c7b29b; obraz w tle: liniowy-gradient(dół, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: left ; kursor: wskaźnik; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", kursywa; kolor: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255,255,255) 100%); ) #ad-1 #submit:hover ( obraz tła: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )

Teraz nadajmy styl wodzie i wywołajmy odpowiednią animację:

#ad-1 ul#water( /* Jeśli potrzebujesz innej animacji wodnej, możesz ją dodać tutaj */ ) #ad-1 li#water-back ( szerokość: 1200px; wysokość: 84px; obraz w tle: url(. . /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; pozycja: bezwzględna; dół: 10 pikseli; lewy: -20 pikseli; animacja: water-back-animation 3 s nieskończona łatwość-in-out; /* Imitacja rozpryskujących się fal */ ) #ad-1 li#water-front ( szerokość: 1200px; wysokość: 158px; obraz w tle: url(../images/ad-1/water -front .png); background-repeat: repeat-x; z-index: 3; position: bezwzględna; bottom: -70px; left:-30px; animacja: water-front-animation 2s nieskończona łatwość wychodzenia; / * Inne animacje rozpryskujących się fal będą działać nieco szybciej, aby stworzyć efekt perspektywy. */ )

Ustaw style dla łodzi i jej elementów. Nazywamy również odpowiednie animacje:

#ad-1 ul#łódź ( szerokość: 249px; wysokość: 215px; z-index: 2; pozycja: bezwzględna; dół: 25px; lewy: 20px; przepełnienie: widoczne; animacja: łódź w animacji 3s 1 luz ; /* Przesuwa grupę w momencie rozpoczęcia reklamy */ ) #ad-1 ul#łódź li ( szerokość: 249px; wysokość: 215px; obraz w tle: url(../images/ad-1/łódź.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animacja: boat-animation 2s nieskończona łatwość wejścia na zewnątrz; /* Symulacja łodzi podskakującej na wodzie - podobnie do animacji używanej już na samej wodzie. */ ) #ad-1 #znak-pytania ( szerokość: 24px; wysokość: 50px; obraz w tle: url(../images/ad-1/znak-pytania.png); pozycja: bezwzględna; po prawej: 34px; góra: -30px; animacja: opóźnione-zanikanie-animacja 4s 1 łatwość-wyjście; /* zanikanie w pytajniku */ )

Teraz stwórzmy style dla chmur. Dla nich wykorzystamy animację z efektem niekończącego się ruchu. ilustracja pokazuje istotę pomysłu:



A oto kod CSS:

#ad-1 #chmury ( pozycja: bezwzględna; góra: 0px; z-index: 0; animacja: animacja chmury 30s nieskończona liniowo; /* Przewiń chmury w lewo, zresetuj i powtórz */ ) #ad-1 #chmura -group -1 ( szerokość: 720px; pozycja: bezwzględna; po lewej: 0px; ) #ad-1 #cloud-group-2 ( szerokość: 720px; pozycja: bezwzględna; po lewej: 720px; ) #ad-1 .cloud-1 (szerokość: 172px; wysokość: 121px; obraz w tle: url(../images/ad-1/cloud-1.png); pozycja: bezwzględna; góra: 10px; lewa: 40px; ) #ad-1 .cloud -2 (szerokość: 121px; wysokość: 75px; obraz w tle: url(../images/ad-1/cloud-2.png); pozycja: bezwzględna; góra: -25px; lewa: 300px; ) #ad- 1. cloud-3 (szerokość: 132px; wysokość: 105px; obraz w tle: url(../images/ad-1/cloud-3.png); pozycja: bezwzględna; góra: -5px; lewa: 530px; )

Animacje

Przypomnienie: Od tego momentu nic nie jest animowane. Jeśli spojrzysz teraz na nasz baner, zobaczysz statyczny obraz. W tym miejscu tworzone są animacje wywołane w powyższym kodzie.

Teraz tchnijmy życie w nasz piękny statyczny obraz:

/* Animacja z symulowanym opóźnieniem służy do wyświetlania wielu elementów. Symulacja opóźnienia odbywa się poprzez rozpoczęcie procesu z kontynuacją 80% animacji (a nie natychmiast). W ten sposób można symulować dowolne opóźnienie: */ @keyframes opóźnione-zanikanie-animacja ( 0% (krycie: 0;) 80% (krycie: 0;) 100% (krycie: 1;) ) /* Animacja wyświetlania formularz z adres e-mail i przycisk. Używa również symulowanego opóźnienia */ @keyframes form-animation ( 0% (krycie: 0; prawy: -400px;) 90% (krycie: 0; prawy: -400px;) 95% (krycie: 0,5; prawy: 20px; ) 100% (opacity: 1; right: 0px;) ) /* Ta animacja służy do wyprowadzania łodzi z ekranu na początku filmu: */ @keyframes boat-in-animation ( 0% (po lewej: -200px;) 100% (po lewej : 20px;) ) /* Animacja chmur. Pierwsza grupa chmur zaczyna przesuwać się od środka, a druga - na prawo od ekranu. Pierwsza grupa jest powoli usuwana z ekranu, a druga pojawia się po prawej stronie. Gdy lewa grupa zostanie całkowicie ukryta, chmury szybko powrócą do swojej pierwotnej pozycji: */ @keyframes cloud-animation ( 0% (po lewej: 0px;) 99.9999% (po lewej: -720px;) 100% (po lewej: 0px;) ) ) / * Ostatnie trzy animacje są prawie takie same - różnica polega na rozmieszczeniu elementów. Naśladują plusk fal oceanu: */ @keyframes łódź-animacja (0% (dół: 0px; lewy: 0px;) 25% (dół: -2px; lewy: -2px;) 70% (dół: 2px; lewy : - 4px;) 100% (dół: -1px; lewy: 0px;) ) @keyframes water-back-animation ( 0% (dół: 10px; lewy: -20px;) 25% (dół: 8px; lewy: - 22px; ) 70% (dół: 12px; lewy: -24px;) 100% (dół: 9px; lewy: -20px;) ) @keyframes water-front-animation (0% (dół: -70px; lewy: -30px) ;) 25% (dół: -68px; lewy: -32px;) 70% (dół: -72px; lewy: -34px;) 100% (dół: -69px; lewy: -30px;) )

Wniosek

W tej lekcji poznaliśmy kilka kluczowych pojęć:

1. Potomkowie otrzymują oprócz animacji swoich rodziców animacje.
2. Tworząc baner, należy dążyć do używania unikalnego identyfikatora, aby uniknąć nakładania się kodu z istniejącym projektem CSS.
3. Elementy powinny być pozycjonowane i stylizowane tak, jakby animacja nie była dostępna, aby zapewnić kompatybilność wsteczną.
4. Jeśli to możliwe, powinieneś zastosować jedną animację dla kilku elementów.

Bez wątpienia jeden z najjaśniejszych trendy 2012 jest rozwinięciem CCS3, HTML5. Dziś oferujemy duże i bardzo przydatny przegląd przykłady" 20+: Kreatywne i przydatne samouczki CSS3″ oferowane na Specky chłopiec. Wszystkie przykłady są wykonane w czyste bez JavaScript, w prezentowanych lekcjach znajduje się demo oraz gotowe pliki CSS3 do pobrania.

Jesteśmy pewni, że te sztuczki i techniki przydadzą się programistom internetowym!

CSS3 lekcje :

1. Galerie zdjęć CSS3, suwaki, efekty graficzne

Suwak 1.1.CSS3

Trudno w to uwierzyć, ale ten suwak z różnymi efektami jest zrobiony wyłącznie na CSS3, bardzo efektowny.

1.2. Tło strony pełnoekranowej z efektem suwaka CSS3

Projektanci stron internetowych od dawna eksperymentują z różnymi tłem dla strony internetowej, ale jak dotąd czysty CSS niewiele mógł zrobić, musiał używać JS. Teraz CSS3 umożliwia dowolną pracę z tłem Twojej witryny - możesz mieć jedno tło z dużym zdjęciem wysokiej jakości, możesz zmieniać kilka teł z różnymi efektami, a także ze skalowalnością tła w zależności od parametrów ekranu. Ogólnie rzecz biorąc, niesamowita okazja do tworzenia kreatywnych witryn.

1.3. Lightbox w CSS3

Z tego samouczka dowiesz się, jak stworzyć Lightbox (Lightbox) z różnymi efektami w czystym CSS.

1.4. Właściwości obrazu CSS3

Ten samouczek przedstawia nowe funkcje CSS3 dotyczące właściwości obrazu, takich jak zaokrąglone narożniki, cienie i inne efekty.

1.5. Animowany baner CSS3

Pasek ładowania 1.6.CSS3

1.7. Wstążka 3D z CSS3



Zobacz demo lub pobierz pliki kodu CSS3 →

2. Menu CSS3, nawigacja i przyciski

2.1. Menu Apple.com w CSS3

Samouczek tworzenia słynnego menu Apple.com w CSS3.

2.2. Animowane menu poziome CSS3

Prosty samouczek, który pokazuje, jak stworzyć animowane menu CSS3 z różnymi efektami.

2.3. Animowane pionowe menu w CSS3

2.4. Animowane przyciski CSS3

Świetny samouczek z 7 przykładami animowanych kreatywnych przycisków.

2.5. Kreatywne animowane menu z obrazami CSS3

W tej lekcji wystarczy spojrzeć na 10 przedstawionych przykładów. Kiedyś tak złożone kreatywne menu powstawały wyłącznie przy pomocy JS. Imponujący!

2.6. Efekt nawigacji po okręgu z CSS3

Niezwykły efekt po najechaniu na wybrany element nawigacji w postaci okręgu z obrazkiem. Zwracamy uwagę!

2.7. Rozwijane menu w CSS3

Samouczek dotyczący implementacji prostego menu rozwijanego z podpoziomami w CSS3.

2.8. Nawigacja CSS3 z animowanymi przejściami

3. Różne efekty w CSS3

3.1. Animowana podpowiedź CSS3 bez jQuery