22: Animowanie SVG za pomocą CSS - CSS-Tricks

Kiedy używasz wbudowanego SVG, cały ten kod SVG znajduje się bezpośrednio w HTML, a więc w DOM. Możesz je stylizować tak, jak w przypadku ,

lub jakikolwiek inny element HTML. Styl CSS daje możliwość animacji i przejść.
Prosty przykład:

Zobacz logo Pen CodePen jako Inline SVG autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

A napisał, jak zająć się nieco bardziej złożonym projektem w tym samouczku. Oto to demo.

Zobacz reklamę Pen Wufoo SVG autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

W tym screencastie tworzymy kolejną animowaną reklamę SVG dla Wufoo, zaczynając prawie od zera. Projekt zawiera chmury, które animujemy, aby poruszać się i powtarzać płynnie i bez końca.

Na początku użyliśmy wbudowanego SVG i animowaliśmy go za pomocą CSS dołączonego do tego samego dokumentu HTML. Ale potem, żeby pokazać, jak to działa, przenieśliśmy ten CSS do samego SVG, co jest całkowicie poprawne. Powodem, dla którego warto to zrobić, jest to, że animacja może działać nawet wtedy, gdy używasz SVG jako lub `background-image`.

Próbny:

Zobacz Pen kKdDj autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Obsługa przeglądarki dla tej animacji będzie się różnić. W chwili pisania tego tekstu działał tylko w przeglądarce Chrome.