Xususiyatini o‘rganish

Sahnani yarating

Bizning animatsiya hajmi hajmiga ega bo'lishimiz va hajmning ta'siri paydo bo'lgan element kerak. Sahna, aylanadigan rasmdan farqli o'laroq, sahifada o'rnatiladi.

Sahna uchun biz yangi istiqbolli mulkdan foydalanamiz, bu esa chuqurroq. Qiymat pikselda o'rnatiladi. Bu foydalanuvchidan kelajakdagi elementlarga masofani belgilaydi. Bilaman, darhol tushunish qiyin. Keling S. ni kamaytiramiz. 1200px oldin 300px Va quyidagi natijani ko'rib chiqing:

Salqinmi?!

Shuningdek, video:

Biz element bilan animatsiyani uyushtiramiz

Endi siz yana yangi xususiyatlarni ko'rasiz. Men hatto darhol ularni darhol eslab qolish va qadriyatlarni tushunishga majburlashni istamayman. Siz boshqacha qilishingiz mumkin: siz shunchaki ularga qaraysiz va tushunasiz, keyin tushunasiz. Aslida, darslarda o'qish siz ular bilan tez-tez uchrashasiz va ular nima ekanligini tushuna boshlaysiz. Shuning uchun, ulardan ko'p narsa borligi haqida tashvishlanmang va siz biron bir narsani bilmaysiz va tushunmaysiz!

Va quyidagi xususiyatlar:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Takrorlash yo'q. Matn-animatsiya: 0 avtoulovlar: 0uthf; -webkit-animatsiya -Name: Spinner; -Webkit-animatsiya-vaqt funktsiyasi: chiziqli; -Webkit-animatsiya-iteratsiya hisob-kitoblari: Cheksiz; -Webkent-animatsiya - muddati: 6s; Animatsiya nomi: Spinner; / * "Spinner" nomi bilan klaviatsion xodimlarni animatsiyalarni ko'rsating * / Animatsiya-vaqt-funktsiyasi: chiziqli; / * Sinxronizatsiya funktsiyasi tomonidan qaysi o'zgarishlar amalga oshiriladi * / Animatsiya-iteratsiya - infinit; / * Animatsion takrorlash soni. "Cheksiz" cheksiz degani * / Animatsiya-davomiylik: 6S; / * animatsiya davomiyligi * / -Webkit-Transformatsion uslubi: qo'riqlash-3d; -Moz-transformator uslubi: qo'riqxona-3d; -Ms-transformator uslubi: qo'riqxona-3d; Transformatsion uslub: saqlovchi-3d; / * Bu 3D o'zgarishi * / ) #Spinner: Hover (-Webkent-animatsion-shtati: bir oz to'xtadi; animatsiya-plit-shtat: bir oz to'xtadi; / * Animatsiyani boshlang * / }

Men prefikssiz xususiyatlarni imzoladim, chunki ular o'xshash funktsiyalarni faqat boshqa brauzerlar uchun bajaradilar. Shuni ham ta'kidlashni istardimki, men rasmni yoqib yuborganingizda, animatsiya-pley-shtat xususiyatlaridan foydalanib, animatsiya-pley-shtat xususiyatlaridan foydalangan holda animatsiyani to'xtatamiz.