22: Animasi SVG dengan CSS - Trik CSS

Saat Anda menggunakan SVG sebaris, semua kode SVG itu berada tepat di HTML, dan dengan demikian di DOM. Anda dapat menatanya seperti Anda melakukan ,

, atau elemen HTML lainnya. Gaya CSS menghadirkan kemungkinan animasi dan transisi.
Contoh sederhana:

Lihat Logo Pen CodePen sebagai Inline SVG oleh Chris Coyier (@chriscoyier) di CodePen.

A menulis cara menangani desain yang sedikit lebih kompleks dalam tutorial ini. Ini demo itu.

Lihat Iklan SVG Pen Wufoo oleh Chris Coyier (@chriscoyier) di CodePen.

Dalam screencast ini kami membuat iklan SVG animasi lainnya untuk Wufoo, mulai dari awal. Desainnya memiliki beberapa awan di dalamnya yang kami animasikan untuk bergerak dan diulangi dengan lancar dan tanpa akhir.

Awalnya, kami menggunakan SVG inline dan menganimasikannya dengan CSS yang dilampirkan ke dokumen HTML yang sama. Tapi kemudian, hanya untuk menunjukkan cara kerjanya, kami memindahkan CSS itu ke dalam SVG itu sendiri, yang sepenuhnya valid. Alasan Anda mungkin ingin melakukannya adalah karena animasi dapat berjalan meskipun Anda menggunakan SVG sebagai atau `background-image`.

Demo:

Lihat Pen kKdDj oleh Chris Coyier (@chriscoyier) di CodePen.

Dukungan browser untuk animasi tersebut akan bervariasi. Pada saat penulisan ini, itu hanya berfungsi di Chrome.