Animating styles with CSS animations (Video Version)

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming

No dobrze. Pewnie zastanawiacie się,
czy używać "setInterval",

czy "requestAnimationFrame"
do swoich animacji...

A ja dorzucę do tego
jeszcze jedną możliwość.

Widzicie, w Chrome,
Firefoksie i IE10+

jest sposób w CSS, żeby robić animacje

bez użycia JavaScript.

Usuńmy kod,
który właśnie napisaliśmy

i wypróbujmy to
do animacji Koleżki-O-Nie.

Umieszczę tu długi komentarz
z wielu linii. Wokół tego wszystkiego.

Najpierw dodamy do strony tag "style".

A potem dodamy coś,
co wygląda jak reguła CSS,

ale to definicja naszej animacji.

Piszemy "keyframes",

a potem nazwę animacji, "getbigger",

oraz klamry.

Żeby zrobić prostą animację,
przechodzącą od 1. stanu do 2.,

określimy stany "from" i "to".

Wewnątrz "from" zapiszemy, jaka
powinna być początkowa własność CSS.

Pamiętacie,
że początek ustawiliśmy na 50 pikseli?

Wewnątrz "to" napiszemy,
jaka powinna być właściwość końcowa.

Tutaj może to było 300 pikseli.
Przy tym kończyliśmy, pamiętacie?

Po zdefiniowaniu animacji
musimy powiedzieć przeglądarce,

który element
powinien z tej animacji korzystać.

Zatem dodamy
normalną regułę CSS dla Koleżki.

Tutaj określimy nazwę animacji...

to "getbigger"...

potem wpiszemy czas trwania animacji,
czyli trzy sekundy.

Zależy, której używacie przeglądarki.

Niektórzy z was mogą myśleć:
"Pięknie, to działa!".

Użytkownicy przeglądarek takich jak
Safari lub Chrome nie widzą efektu.

Z powodu tzw. prefiksów dostawców.

Czasami przeglądarka obsługuje

jakąś nową, wyrafinowaną opcję,

do której dokłada się
prefiks dostawcy,

by wskazać, że to się może zmienić.

W ten sposób przeglądarki
wypróbowują nowe opcje.

Aby to działało w Chrome
(o ile jeszcze nie działa),

musimy powtórzyć to, co zrobiliśmy,
a z przodu dać webkit.

Musimy więc powtórzyć tę część

i umieścić webkit tutaj.

A tu powielimy to

i damy -webkit-, -webkit-.

O, pięknie!

Teraz Koleżka rośnie
w każdej przeglądarce.

Mam nadzieję,
że kiedy oglądacie ten film,

prefiksy nie są już potrzebne.

Ale dobrze wiedzieć, że istnieją,

bo mogą się wam kiedyś przydać
do jakiejś innej opcji.

W CSS jest jeszcze jeden sposób
na robienie animacji,

związany z właściwością "transition".

Mówi ona przeglądarce,
jak łagodnie przejść

od jednej właściwości do drugiej.

Powiedzmy, że chcemy,
by czcionka pozostałego czasu

rosła, gdy najedziemy na nią myszką.

Moglibyśmy zrobić to w JavaScript,

przypisując listę zdarzeń
dla "mouseOver";

potem "requestAnimationFrame",

by zwiększać właściwość
"rozmiar czcionki".

Możemy też to zrobić także
całkowicie w CSS. Pomyślmy.

Jak normalnie zwiększyliśmy czcionkę
w CSS, w związku z ruchem myszki?

Np. za pomocą reguły "hover".

Piszemy "#countdown:hover"

i rozmiar czcionki: 150 pikseli.

Dobrze. Teraz musimy tylko
powiedzieć przeglądarce,

żeby przeniosła
właściwość "rozmiar czcionki".

O ile czasu ma ją przesunąć
i jakiej funkcji ma użyć.

Piszemy: "transition:
font-size one second linear".

A teraz zatrzymajcie odtwarzanie

i spróbujcie najechać myszką na tekst.
Zobaczcie, co się stanie.

Jeśli używacie Chrome, Firefoksa
lub IE 10+,

tekst powinien rosnąć gładko.

Nie potrzebujecie do tej metody
żadnych prefiksów dostawców.

Bardzo dużo możecie zrobić
z pomocą animacji i "transition".

Przeglądarki
dobrze sobie z nimi radzą.

Zachęcam: poznawajcie obie metody.