CSS3 animatsiyasidan qanday foydalanish mumkin: o'rgatuvchi, namunaviy kodlar va misollar

Maqola muallifi:
  • Veb-sayt dizayni
  • Yangilandi: Yanvar 28, 2013

Biz JS va jQuery'dan foydalanganimizda biz animatsiyalar ustidan to'liq nazorat qilamiz va biz ajoyib ta'sirlar yaratishimiz mumkin, lekin narx ancha yuqori. Jarayon vaqtini, o'zaro faoliyat brauzerlarning muvofiqligi (masalan, mobil qurilmalar JSga nisbatan ancha farq qiladi) va kod murakkabligi o'zi animatsion interfeyslarni yaratishda yodda tutish kerak bo'lgan fikrlar.

Shunday qilib, bugungi kunda biz JSni CSS ko'rsatuvlari va Transitions yordamida qanday qilib oldini olishni ko'rib chiqamiz. Biz juda muhim bosqichlardan akkordeon panellari va jonlantirilgan sub menyular kabi ajoyib ta'sirlarni muhokama qilamiz.

Joyni, bloknotni va haqiqiy brauzerni (IEdan boshqa narsa) oling va boshlaylik.

Isitish

CSS animatsiyalaridan foydalanishda bizda bir nechta afzalliklar (va hayotimizda mavjud bo'lgan har qanday kamchiliklar) mavjud. Agar siz xo'jayiningizga yoki mijozingizga bu narsalarni sotishingiz kerak bo'lsa, bu nimani yodda saqlash kerak:

  • Ular potensial tezroq, chunki ular apparat tezlashmasidan foydalanishlari mumkin (HTML5 ilovalari sifatida)
  • Ular mobil qurilmalarda yaxshiroq ishlashadi va teginish voqealarini kuzatish uchun maxsus kodni talab qilmaydi
  • XS brauzer tomonidan talqin qilinishi kerak va brauzerni ochish imkoniyati juda katta. Shunday qilib, CSS muvaffaqiyatsizlikka uchraganida, JS butun sahifani sindira olishi mumkin
  • Ular juda yaxshi brauzerni qo'llab-quvvatlashiga ega (bu sayt sizga maxsus statistikani tekshirishga yordam beradi: http://caniuse.com/#search )

CSS3 animatsiyasi misollar

Ushbu xabarni tayyorlashni boshlashdan oldin, toza CSS-da yaratilgan bir nechta chiroyli animatsiyalarni ko'rib chiqamiz.

Sof CSS-ning Twitter Fail Whale

Animatsiya muvaffaqiyatsiz bal

Steven Dennis tomonidan tayyorlangan, buni amalda ko'rish.

Sofdagi CSS-ni ixchamlash mumkin
CSS 3 animatsiya namunalari: ildiz otib yuruvchi jonivor

Roman Cortes tomonidan tayyorlangan, buni amalda ko'rish.

Sof CSS Walking Man

CSS 3 animatsiya namunalari: yuruvchi odam

Endryu Hoyer tomonidan tayyorlangan, buni amalda ko'rish.

Qo'lingizni zulmatga olish

Kodni boshlaymiz. Animatsiyani tetiklash uchun CSS pseudo sinflarini ko'p ishlatamiz. Haqiqatan ham, ko'pgina ishlab chiquvchilar sizga animatsiyalarni faollashtirish va o'chirish uchun JSdan foydalanishni maslahat beradi, ammo bu erda biz osonroq yo'lni topamiz:

#test {fon: qizil; } #test: hover {fon: yashil; } #test: faol {fon: ko'k; } #test: goal {fon: qora; }

Foydalanish uchun bir nechta pseudo-sinflarimiz bor, lekin sizda bu fikr bor! Xo'sh, #test elementni bosganingizda nima sodir bo'ladi?

  • Oddiy holat: fon qizil bo'ladi
  • Hover: Sichqoncha element maydoniga kirganda, u yashil fonga ega bo'ladi
  • Faol: Ustidagi kursorni bosganingizda va sichqonchaning tugmasi bosilganda fon rangi ko'k rangda bo'ladi
  • Nishon: Joriy sahifada sanasi #test bo'lsa, bu element qora bo'ladi

Ulardan har biri CSS animatsiyasi uchun ishlatilishi mumkin, masalan, ushbu kod bilan maqsadli soxta elementlardan foydalanishda CSS animatsiyasini faollashtirish va o'chirish uchun 2 havolalarni yaratishingiz mumkin:

<a href='#test'> faollashtiring </a> <a href='#'> o'chirib qo'ying </a>

CSS o'tishlari

CSS-ga o'tish dastlabki holatdan oxirigacha silliq ravishda o'zgaradi. Shunday qilib, asosiy translatsiyada "o'tish" xususiyati yordamida vaqt va har bir xususiyat ta'sirlanishini va animatsiya qanday bo'lishi kerakligini belgilang. Misolni ko'rib chiqaylik:

.test {/ * o'tish-mulk muddati vaqt-funktsiyasi, * / rang: ko'k; o'tish: rang 2s, shrift o'lchamlari 2s qulaylashtirildi; } .test: hover {color: rad; } .test: faol {font-size: 200%; }

.Test elementini suratga olayotganda u rangni asta-sekin ko'kdan qizilga o'zgartiradi (qanday yaxshi palet, ha?). Elementni bossangiz, shrift o'lchami odatiy shrift hajmining 200% ga oshib boradi.

Bundan tashqari, animatsiya uchun mavjud bo'lgan "vaqt" qanday sarflanishi haqida "o'tish davri" xususiyati ham mavjud. Quyidagi mumkin bo'lgan qiymatlar:

  • Lineer: Boshidan oxirigacha bir xil tezlik
  • Qulaylik: sekin boshlash
  • Chidamlilik: Sekin-oxir
  • Osonlik: sekin boshlash, o'rtada tez, keyin sekin tugatish
  • Ruxsat berishning osonligi: Sekin boshlash, sekinlashuv
  • Kubik-bezier (a, b, c, d): maxsus tezlik

Kub Bezier funktsiyasi 4 dan 0 ga o'zgarib turadigan, animatsiya tezligi X davomiyligi uchun matematik egri vakili bo'lgan 1 raqamli maxsus animatsiya yaratadi.

Yaxshi brauzer muvofiqligi uchun opera, Firefox va webkit uchun sotuvchi prefikslarini quyidagi kabi ko'rib chiqing:

div {kenglik: 400px; -o-o'tish: kenglik 2s; -moz-o'tish: kenglik 2s; -webkit-o'tish: kenglik 2s; o'tish: kenglik 2s; }

Bundan tashqari, brauzer kengligiga (mobil qurilmalar, planshetlar) qarab turli xil o'tishlarni aniqlash uchun ommaviy axborot so'rovlaridan foydalanishingiz mumkin. Bu oddiy misol:

body {harflarning o'lchami: 1em; } @media ekrani va (max-width: 800px) {body (shrift hajmi: 0.8em; }} @media ekrani va (max-width: 400px) {body {harflarning o'lchami: 0.7em; }}

Bu erda brauzer kengligini oshirganingizda shrift hajmi birdan o'zgaradi. Ushbu kodni amalga oshirishga to'sqinlik qiladi, bu juda ham oson o'tish imkonini beradi:

body {-o-o'tish: shrift hajmi .5s linear; -moz-o'tish: shrift hajmi .5s linear; -webkit-o'tish: shrift hajmi .5s linear; o'tish: shrift hajmi .5s linear; }

Bu kengliklarni, ranglarni, to'ldirishlarni, menyu ko'rsatishni o'zgartirmoqchi bo'lsangiz, portreti / landshaft uchun turli ko'rsatkichlar yoki o'lchamlaringiz bo'lsa, buni ham foydalanishingiz mumkin.

CSS animatsiyasi - haqiqiy dam olish boshlanadi

Animatsiya - bu bitta selektorda belgilangan o'tishning bir qatoridir. CSS animatsiyalarini aniqlash uchun siz 2 qadamlarni bajarishingiz kerak.

@Keyframe qoida animatsiya bosqichlari ketma-ketligini aniqlash uchun ishlatiladi va bu animatsiyaning qanday ishlashini tasvirlaydigan noyob ism va uslublar bilan belgilanadi. Odatdagidek, biz ushbu misolda bo'lgani kabi ba'zi bir ishlab chiqaruvchilarning prefikslariga kerak bo'ladi:

/ * har bir sotuvchi uchun bir xil kod * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * animatsiya nomi * / @keyframe my-animation {/ * ramka tanlagichi * / 0% {/ * ramka uslubi * / chap: 0px; Yuqori: 0px; } 25% {Chap: 200px; Yuqori: 0px; } 50% {Chap: 200px; Yuqori: 200px; } 75% {Chap: 0px; Yuqori: 200px; } 100% {Chap: 0px; Yuqori: 0px; }}

Shunday qilib, har bir uslub stsenariy / vaqt belgisi (flesh animatsiyadan olingan ramkalar kabi) bilan belgilanadi va u erda qo'llaniladigan uslublar. Bu kalit kvadrat, masalan, element chapga, so'ngra yuqoriga, keyin esa o'ngga, keyin pastga harakat qiladi.

1 qadamini bajarganingizdan so'ng asosiy kvadratni yaratganingizdan so'ng uni asl element sifatida qo'llashingiz mumkin. Keyinchalik, biz CSS-ga o'tishda juda ko'p xuddi shunday mantiqdan foydalanamiz, farq hozir bizning "o'tish" juda murakkab animatsiya.

Uni qo'llash uchun animatsiya xususiyatidan foydalanamiz va 7 sub-xususiyatlariga ega:

  • Ismi: bu noyob identifikator
  • Davomiyligi: 0% dan 100% gacha qancha vaqt ketadi?
  • Vaqtni belgilash funksiyasi: o'tish davri funksiyasi kabi deyarli bir xil
  • Gecikme: 0% boshlash uchun qancha vaqt ketadi?
  • Yineleme soni: Qanchalik takrorlanamiz (abadiy davr uchun "cheksiz"),
  • Yo'nalish: normal yoki muqobil (teskari)
  • O'yin holati: animatsiya ishlayotgan yoki to'xtatilgan bo'lsa

Bizning animatsiyani #test elementiga qo'llasa bo'ladi, chunki u sahifa maqsadi bo'lsa:

#test: target {/ * animatsiya-ismi | davomiyligi | Vaqt-vazifasi kechikish | iteratsion hisoblash yo'nalish play-state * / animatsiya: my-animatsiya 10s linear 0s cheksiz oddiy ishlaydi; }

Buni yodda tutib, biz bir necha ajoyib misollarni yarataylik.

CSS Faqat Akkordeon

CSS animatsiyalaridan foydalanib, kengaytiriladigan paneli yaratamiz. Asosiy HTML tarkibi:

<div class = "akkordion"> <a href="#tab1"> Yorliq 1 </a> <div id = "tab1"> <p> matnli 1 </ p> </ div> <a href = "# <div id = "tab2"> <p> TEXT 2 </ p> </ div> <a href="#tab2"> 2 yorlig'i </a> <div id = "TAB 3" tab3 "> <p> matnli 3 </ p> </ div> </ div>

Bu faqat paneli yaratadi va ularning har birini ishga soladi. Mana, sehrgarlik sodir bo'ladi:

/ * akkordeon ichida joylashgan har qanday div * / .accordion div {/ * sukut bo'yicha yashirin * / height: 0; toshqin: yashirin; / * qora sehrli * / o'tish: balandlik 1s; } / * ko'rsatilgan div * / .accordion div bo'lsa: target {/ * height: auto ishlamaydi, lekin bu yaxshi * / balandlikda ishlaydi: 80px; }

Juda oddiy, ha? Buning uchun siz butun hayotingizni JS yordamida o'tkazdingizmi? :)

Faqat menyudan CSS menyusi

Bu yana bir oddiy dastur. Sizning saytingizda navigatsiya menyusi mavjud bo'lib, ko'pincha u erda ba'zi bir sub menyulardan foydalanishimiz kerak. Ma'lumotlar ko'rsatish va yashirish uchun eng yaxshi usul jQuery dan foydalanadimi? Bu kodni sinab ko'rganingizdan so'ng yana bir marta o'ylab ko'ring:

<nav> <ul> <li> <a href='#item1'> 1 elementi </a> <div> <ul> <li> <a href='#item11'> 1.1 elementi </a> </ li> <li> <a href='#item12'> Mavzu 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Mavzu 2 <div> <ul> <li> <a href='#item21'> 2.1 elementi </a> </ li> <li> <a href='#item22'> 2.2 elementi </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

Va sehrgarlik bu erda boshlanadi:

a {/ * havolalarni biroz yaxshiroq qilish * / displey: blok; to'ldirish: 4px; } nav {text-align: center; } / * har qanday menyu (asosiy qismini o'z ichiga oladi) * / nav ul {display: inline-block; list-style: none; } nav> ul> li {/ * gorizontal elementlar (vertikal juda yaxshi ishlaydi) * / float: chap; } nav div div {/ * har qanday kichik menyuni * / balandligi qulab tushadi: 0; toshqin: yashirin; / * Houdini hissi * / o'tish: balandligi 1s; } nav li: hover> div {balandlik: 56px; }

Xulosa

Bu, albatta, faqat boshlang'ich qo'llanma. CSS-dan faqatgina animatsiyalar va ko'plab narsalar kelishi bilan amalga oshirilishi mumkin bo'lgan boshqa salqin effektlar ko'p.

Shunday qilib, bundan oldin foydalanganmisiz? CSS animatsiyasi uchun yana bir yaxshi dastur haqida fikr yuritasizmi? Fikrlaringiz bilan fikringizni baham ko'ring!

Rochesterda Oliveira haqida

Men Itajubaning (MG) braziliyalik veb-uslubchisi va tadbirkori bo'ldim. Men qorong'u mavzular haqida yozishni yaxshi ko'raman va ba'zi ajoyib narsalarni qilaman.

»I ¿