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

Sof CSS Walking Man

 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:

faollashtiring o'chirib qo'ying

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:

Yorliq 1

matnli 1
TEXT 2 2 yorlig'i

matnli 3

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:

• 1 elementi
  • 1.1 elementi
  • Mavzu 1.2
  • Mavzu 2
    • 2.1 elementi
    • 2.2 elementi

      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!