Xususiyatini o‘rganish

CSS Animatsiya

Biz yaratadigan animatsiyada yalab atrofida aylanadigan rasmni o'z ichiga oladi:

Salqinmi?!

Anisual bo'lmaganlar uchun 😉:

Ozgina HTML

Hammasi aniq va faqat HTML tuzilishida:

Asosiy freymlar CSS

Asosiy xodimlar nima?

Blokda @Keyfames. Klavreym deb nomlangan bir qator qoidalar mavjud. Kalitlar xodimlari o'z vaqtida animatsiya paytida ma'lum bir vaqtda ishlatiladigan xususiyatlarni o'z ichiga oladi. Qayta-yashnaganda, qiymatlar interpolatatsiya qilinadi ("Silliq" bir qiymatdan boshqasiga o'ting) va biz faqat silliq o'tishni ko'ramiz.

Siz uchun qiyin tuyulishi mumkin, ammo bu eng oddiy misollardan biri.

Biz boshlang'ich va yakuniy kalit ramkasini aniqlaymiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/ * Webkit va Opera * / @ -Webkentit-tugmachali (-Webkit-o'zgartiradigan: aylanuvchi (-Vebit);) ga (-Webkit);) (aylantiruvchi);) / * Boshqa barcha brauzerlar * / @Keyfames Spinner (-Moz-o'zgartirilishi: aylantiruvchi (0Deg); -MS-Tirik: Tirik (0Deg);) Transformatsiya: aylanish (-360deg); Translate: aylantiring (-360deg);));)

Kalit ramkalariga qo'shimcha ravishda, biz shuningdek @Keyfames Spinnerni qiziqtiramiz, bu erda biz keyinchalik animatsiyaga murojaat qilishimizni ko'rsatamiz spinner..