22: SVG: n animointi CSS: llä - CSS-temppuja

Kun käytät sisäistä SVG: tä, kaikki SVG-koodi on oikein HTML: ssä ja siten DOM: ssa. Voit muotoilla niitä aivan kuten tekisitkin ,

tai mikä tahansa muu HTML-elementti. CSS-muotoilu tuo mahdollisuuden animaatioihin ja siirtymiin.
Yksinkertainen esimerkki:

Katso Chris Coyierin (@chriscoyier) kynä CodePen-logo Inline SVG: ksi CodePenissä.

A kirjoitti kuinka käsitellä hieman monimutkaisempi muotoilu tässä opetusohjelmassa. Tässä demo.

Katso Chris Coyierin (@chriscoyier) Pen Wufoo SVG -ilmoitus CodePenistä.

Tässä kuvaruudussa teemme toisen animoidun SVG-mainoksen Wufoolle, joka alkaa melkein tyhjästä. Suunnittelussa on joitain pilviä, joita animoimme liikkua ja toistaa sujuvasti ja loputtomasti.

Aluksi käytimme sisäistä SVG: tä ja animoimme sen CSS: llä, joka oli juuri liitetty samaan HTML-asiakirjaan. Mutta sitten, vain esitelläksemme, miten se toimii, muutimme CSS: n itse SVG: n sisälle, mikä on täysin kelvollinen. Syy, jonka haluat ehkä tehdä, johtuu siitä, että silloin animaatio voi toimia myös silloin, kun käytät SVG: tä nimellä tai `background-image`.

Esittely:

Katso Chris Coyierin (@chriscoyier) kynä kKdDj CodePenistä.

Animaation selaintuki vaihtelee. Tämän kirjoituksen aikaan se toimi vain Chromessa.