Бид ажиллаж эхлэх интерфэйс рүү ойртох тусам хэрэглэгчдэд илүү ойлгомжтой болно. Амьдралд бараг юу ч тохиолддоггүй - лаазтай ундаа онгойлгох эсвэл унтахынхаа өмнө нүдээ аних үед бид вэб дээр байдаг шиг хурц "нээлттэй/хаалттай" бус олон тооны завсрын төлөвийг ажигладаг.

Миний нийтлэлд би CSS хөдөлгөөнт дүрс, түүнтэй хэрхэн ажиллах талаар мэдлэгээ хуваалцах болно. Хөдөлгөөнт дүрс нь вэбсайтуудад динамик өгч, тэдний чадавхийг ойлгох чадварыг сайжруулдаг. Энэ нь вэб хуудсуудыг амилуулж, хэрэглэгчийн харилцаанд тусалдаг. CSS3 шилжилтээс ялгаатай нь CSS хөдөлгөөнт дүрс нь түлхүүр фрэйм ​​дээр суурилдаг. Энэ нь танд тодорхой хугацаанд эффект тоглуулах, давтах, мөн давталт доторх хөдөлгөөнт дүрсийг автоматаар зогсоох боломжийг олгоно.

Хөдөлгөөнт дүрс нь CSS-д хадгалагдсан түлхүүр фрэйм ​​эсвэл түлхүүр фрэймийн багц юм.

@keyframes animation-test ( 0% (өргөн: 100px; ) 100% (өргөн: 200px; ) )

Энд юу болж байгааг харцгаая. @keyframes түлхүүр үг нь хөдөлгөөнт дүрсийг өөрөө илэрхийлдэг. Дараа нь хөдөлгөөнт дүрсний нэр гарч ирнэ, манай тохиолдолд animation-test. Буржгар хаалт нь түлхүүр фрэймийн жагсаалтыг агуулна. Бид 0% -ийн эхлэл, 100% -ийн төгсгөлийн хүрээг ашигладаг (тэдгээрийг мөн эхлэн, хүртэл бичиж болно).
Доорх кодыг харна уу. Хөдөлгөөнт дүрсийг мөн дараах байдлаар тохируулж болно:

@keyframes animation-test ( ( өргөн: 0; ) 25% ( өргөн: 75px; ) 75% ( өргөн: 150px; ) хүртэл ( өргөн: 100%; ) )

Хэрэв эхлэл эсвэл төгсгөлийн хүрээ заагаагүй бол хөтөч тэдгээрт хөдөлгөөнт дүрс оруулаагүй мэт автоматаар илрүүлэх болно гэдгийг санаарай.

Та анимацыг дараах элементтэй холбож болно:

Элемент сонгогч ( хөдөлгөөнт дүрсийн нэр: таны хөдөлгөөнт дүрс; хөдөлгөөнт дүрсийн үргэлжлэх хугацаа: 2.5 секунд; )

Animation-name шинж чанар нь @keyframes хөдөлгөөнт дүрсний нэрийг зааж өгдөг. Хөдөлгөөнт дүрсний үргэлжлэх хугацаа нь секунд (1с, 30с, .5с) эсвэл миллисекунд (600мс, 2500мс)-ээр хөдөлгөөнт дүрсийн үргэлжлэх хугацааг тодорхойлдог.

Та мөн түлхүүр фрэймүүдийг бүлэглэж болно:

@keyframes animation-test ( 0%, 35% (өргөн: 50px; ) 75% (өргөн: 200px; ) 100% (өргөн: 100%; ) )

Та нэг элементэд (сонгогч) хэд хэдэн хөдөлгөөнт дүрс хэрэглэж болно. Тэдгээрийн нэр, параметрүүдийг хэрэглээний дарааллаар бичнэ.

Элемент сонгогч ( хөдөлгөөнт-нэр: аним-нэр-1, аним-нэр-2; хөдөлгөөнт-үргэлжлэх хугацаа: 1 секунд, 3 секунд; )

Анимацын саатал:

Animation-delay шинж чанар нь хөдөлгөөнт дүрс тоглуулахаас өмнөх саатлыг секунд эсвэл миллисекундээр тодорхойлдог:

Элемент сонгогч ( animation-нэр: anim-name-1; хөдөлгөөнт дүрс үргэлжлэх хугацаа: 3 секунд; хөдөлгөөнт дүрс саатал: 2 секунд; /* хөдөлгөөн эхлэхээс өмнө 2 секунд өнгөрөх болно */ )

Хөдөлгөөнт дүрсийг дахин тоглуулах:

animation-iteration-count-ийг ашиглан бид хөдөлгөөнт дүрс хэдэн удаа давтагдахыг зааж өгч болно: 0, 1, 2, 3 гэх мэт. Эсвэл давталт хийх хязгааргүй:

Элемент сонгогч ( animation-нэр: anim-name-1; хөдөлгөөнт-хугацаа: 3сек; хөдөлгөөнт-хоцролт: 4сек; хөдөлгөөнт-давталтын-тоо: 5; /* хөдөлгөөнт дүрс 5 удаа тоглодог */ )

Хөдөлгөөнт дүрслэлийн өмнөх ба дараах элементийн төлөв:

Animation-fill-mode шинж чанарыг ашиглан хөдөлгөөнт дүрс эхлэхээс өмнө болон дууссаны дараа тухайн элемент ямар төлөвт байхыг зааж өгөх боломжтой.

хөдөлгөөнт бөглөх горим: урагшлах;- хөдөлгөөнт элемент нь дуусгах/тоглуулах дараа сүүлийн түлхүүр фрэймийн төлөвт байх болно;

а nimation-fill-mode: арагшаа;- элемент нь эхний түлхүүр фрэймийн төлөвт байх болно;

хөдөлгөөнт бөглөх горим: хоёулаа; - хөдөлгөөнт дүрс эхлэхээс өмнө элемент нь эхний түлхүүр фрэймийн төлөвт, дууссаны дараа - сүүлийн үеийн төлөвт байх болно.

Хөдөлгөөнт дүрсийг эхлүүлэх, зогсоох:

Энэ нь animation-play-state өмчийн үүрэг бөгөөд энэ нь ажиллаж байгаа эсвэл түр зогссон гэсэн хоёр утгыг авч болно.

Элемент сонгогч: хулганаар ( хөдөлгөөнт-тоглуулах-төлөв: түр зогсоосон; )

Хүүхэлдэйн киноны чиглэл:

Animation-direction шинж чанар нь хөдөлгөөнт дүрс тоглох чиглэлийг хэрхэн удирдахыг зааж өгдөг. Энд боломжит утгууд байна:

хөдөлгөөнт чиглэл: хэвийн; - хөдөлгөөнт дүрсийг шууд дарааллаар тоглодог;

хөдөлгөөнт чиглэл: урвуу; - хөдөлгөөнт дүрсийг урвуу дарааллаар, -ээс эхлэн тоглодог;

хөдөлгөөнт-чиглэл: ээлжлэн;- тэгш хөдөлгөөнт давталтуудыг урвуу дарааллаар, сондгой - урагшлах дарааллаар тоглодог;

хөдөлгөөнт-чиглэл: ээлжлэн-урвуу; - сондгой хөдөлгөөнт давталтуудыг урвуу дарааллаар, тэгш - урагшлах дарааллаар тоглодог.

Хөдөлгөөнт фреймүүдийг жигд гаргах функц:

Animation-timing-function шинж чанар нь хөдөлгөөнт дүрсийг тоглуулах хурдыг хариуцдаг тусгай функцийг тохируулах боломжийг танд олгоно. Анхдагч байдлаар, хөдөлгөөнт дүрс удаан эхэлж, хурдан хурдасч, төгсгөлд нь удааширдаг. Одоогоор бидэнд дараах урьдчилан тодорхойлсон утгууд байна: шугаман, хялбар, хялбар, хялбар, хялбар, гарах, алхам эхлэх, алхам төгсгөл.

Гэсэн хэдий ч та ийм функцийг өөрөө үүсгэж болно. Утга хөдөлгөөнт-цаг хугацааны функц: куб-безиер(P1x, P1y, P2x, P2y); 4 аргументыг оролт болгон авч, хөдөлгөөнт процессын тархалтын муруйг байгуулна.

Та илүү нарийвчлан судлах эсвэл вэбсайтаас эдгээр функцийг бий болгохыг оролдож болно http://cubic-bezier.com

Эцэст нь, хөдөлгөөнт дүрсийг алхамуудын тоо, чиглэлийг (эхлэх эсвэл төгсгөл) оруулах алхмуудын функцийг ашиглан бие даасан утгууд (алхам) болгон хувааж болно. Доорх жишээнд хөдөлгөөнт дүрс нь 5 алхамаас бүрдэх бөгөөд сүүлийн алхам нь хөдөлгөөн дуусахаас өмнө хийгдэнэ.

Элемент сонгогч ( animation-нэр: anim-name-1; хөдөлгөөнт-үргэлжлэх хугацаа: 3сек; хөдөлгөөнт-саатгал: 5сек; хөдөлгөөнт-давталтын-тоо: 3; хөдөлгөөнт-цаг функц: алхам(5, төгсгөл); )

Хөдөлгөөнт дүрсний хөтөчийн дэмжлэг:

Хүснэгт дэх утгууд нь өмчийг бүрэн дэмждэг хөтчийн анхны хувилбарыг харуулж байна.

-webkit-, -moz- эсвэл -O- бүхий утгууд нь угтвартай ажиллаж байсан анхны хувилбарыг заана.

https://www.w3schools.com вэбсайт дээр Та CSS хөдөлгөөнт дүрсийг илүү нарийвчлан судлах боломжтой (жишээгээр).
Хөдөлгөөнт дүрстэй ажиллах алдартай номын сангийн нэг бол animate.css.

CSS хөдөлгөөнт дүрстэй ажиллахад тулгардаг бэрхшээлүүд үндэслэлгүй мэт санагдаж магадгүй юм. Гэхдээ энэ нь туйлын үнэн биш юм.

Нэгдүгээрт, CSS нь интерфейсийн хэрэглэгчийн туршлагыг сайжруулах хүчирхэг хэрэгсэл юм. Энэ нь хэрэглэгчийн бүтээмжид төдийлөн нөлөөлдөггүй. JavaScript аналогуудаас ялгаатай. Ашиглах замаар технологи тооцоолох хүч GPU нь хөтчүүдэд элементүүдийн үзүүлэх хурдыг хурдан оновчтой болгох боломжийг олгодог.

Хоёрдугаарт, CSS хөдөлгөөнт дүрсийг хэрэгжүүлэх уян хатан байдал, хурд, хялбар байдал нь одоо байгаа эсвэл шинэ интерфейсүүдэд "амьсгалахад" тусална. Ерөнхий болон анхны хандлагыг боловсруулж, технологийн онцлогийг ойлгосноор та бараг бүх төслүүдэд ашиглах боломжтой өвөрмөц интерфейсийг бий болгож чадна.

Та нийтлэлээс олсон гэж найдаж байна хэрэгтэй мэдээлэлөөрийнхөө төлөө. Бүгдэд нь сайхан сайтууд. Хүүхэлдэйн киноны талаар бүү мартаарай :)

АНХААР! Энэ хичээлээр бид анимэйшн дээр дүн шинжилгээ хийх тул би түүний ажлын жишээг зургаар харуулах боломжгүй тул код засварлагчийг нээж, энэ нийтлэлд өгөгдсөн кодыг бичээрэй.

Бүтээлийн үндэс

Тиймээс юуны түрүүнд үүнийг хэрхэн бүтээхээс эхлэх хэрэгтэй. Та CSS-ийн аливаа зүйлийг шаардлагатай шинж чанаруудыг хүссэн сонгогчдоо тохирох утгыг өгөх замаар хэрэгжүүлдэг гэдэгт та дассан байх. Тиймээс хөдөлгөөнт дүрс үүсгэх үед энэ нь хангалтгүй юм. Диаграм нь иймэрхүү харагдаж байна:

Шилжилтийн эффектүүд нь @keyframes ашиглан өөрөө бүтээгддэг

Шаардлагатай элементийг ижил хөдөлгөөнт дүрс, түүнчлэн түүний параметрүүдийг (энэ бүх шинж чанарууд ба тэдгээрийн утгыг ашиглан) өгдөг.

Тиймээс эхлээд бид @keyframes-д шаардлагатай өөрчлөлтүүдийг тайлбарлах хэрэгтэй бөгөөд тэдэнтэй хэрхэн ажиллах талаар нарийвчлан авч үзье.

@keyframes синтакс

Уг нь би танд маш энгийн ч гэсэн бэлэн жишээ ашиглан бүх зүйлийг тайлбарлах нь илүү хялбар байх болно. Энд байна (код нь css файлд нэмэгдсэн):

@keyframes pulse( 0%(фонтын хэмжээ: 50px;) 50%(фонтын хэмжээ: 60px;)) 100%(фонтын хэмжээ: 50px;))

@keyframes импульс ( 0% (фонтын хэмжээ: 50px;) 50% (фонтын хэмжээ: 60px;))

Тиймээс @keyframes түлхүүр үгийн дараа хөдөлгөөнт дүрсийн нэрээр ажиллах дурын үг бий. Манай тохиолдолд энэ нь "импульс" юм. Дараа нь шаардлагатай дүрмийг бичсэн буржгар хаалтуудыг нээ.

Хувиар нь заасан шинж чанаруудыг элементэд нэмж оруулах хугацааны тэмдэг гэж нэрлэгддэг. Манай тохиолдолд бичсэн зүйл нь дараахь зүйлийг илэрхийлнэ: гүйцэтгэлийн эхэнд фонтын хэмжээ 50 пиксел байх ба дунд хэсэгт 60 хүртэл нэмэгдэж, эцэст нь анхны хэмжээ рүү дахин буурах болно.

-ээс болон хүртэлх түлхүүр үгс нь хувийн оруулгыг орлуулж болно; тэдгээр нь 0% ба 100%, өөрөөр хэлбэл тоглуулах эхлэл ба төгсгөлийг тус тус заана.

Хөдөлгөөнт дүрсийг үйлдэлд оруулах

Одоогоор бидэнд хөдөлгөөнт эффект үүсгэдэг код л байгаа, гэхдээ үүнийг хаана ч ашигладаггүй. Хэрэв та вэб хуудсаа шинэчилбэл юу ч өөрчлөгдөхгүй. Үүний дагуу хөдөлгөөнт дүрсийг ашиглахын тулд та хоёр алхам хийх хэрэгтэй.

Хэрэглэх элементээ сонгоно уу

Үүнийг @keyframes (нэрээр)-ээр тайлбарласан дүрмүүдтэй холбож, мөн тохируулна уу нэмэлт тохиргооХэрэв шаардлагатай бол.

Оролдоод үзье

Би html файлдаа энгийн текстийн мөр агуулсан сүүдэр класстай блок үүсгэсэн. Бидний зорилго бол өмнө нь тайлбарласан хөдөлгөөнт эффектүүдийг ашиглах явдал юм текст элемент.

Бүх зүйл ажиллахын тулд энэ тохиолдолд зааж өгөх шаардлагатай хоёр шинж чанар байдаг. Нэгдүгээрт, энэ бол бидний түлхүүр фрэймд бичсэн нэр юм. Хоёрдугаарт, энэ бол хөдөлгөөнт дүрсний үргэлжлэх хугацаа, учир нь энэ параметргүйгээр хөтөч үүнийг зүгээр л тоглуулах боломжгүй болно.

Тиймээс, манай блокт байгаа хэв маягаас гадна бид шинээр нэмж оруулав.

хөдөлгөөнт нэр: импульс; хөдөлгөөнт дүрсний үргэлжлэх хугацаа: 2 секунд;

Тиймээс бүх зүйл 4 удаа давтагдаж, дараа нь зогсох болно. Таны ойлгож байгаагаар дөрвийн оронд та ямар ч тоог оруулж болно.

Css3 дээрх төгсгөлгүй хөдөлгөөнт дүрс

Ижил өмчийг ашиглан маш амархан хэрэгждэг. Үнэн хэрэгтээ та давталтын тоог хэдхэн мянга болгож тохируулж болно, энэ нь хангалттай байх болно, гэхдээ онолын хувьд бидний хөдөлгөөнт дүрс хязгааргүй давтагдахгүй.

хөдөлгөөнт-давталтын тоо: хязгааргүй;

хөдөлгөөнт дүрс - давталт - тоо: хязгааргүй;

Ингээд л бид эцэс төгсгөлгүй давталт хийлээ. Насан туршдаа дэлгэцийн ард суусны дараа энэ үнэн эсэхийг шалгахыг зөвлөхгүй. Энэ нь үр нөлөөг байнга давтаж, алга болохгүй байхыг хүссэн тохиолдолд л ашигладаг. Хэрэв энэ нь анхаарал татдаггүй бөгөөд хэрэглэгчийн анхаарлыг сарниулахгүй бол яагаад болохгүй гэж.

Эхлэхээс өмнө хойшлуул

Анхдагч байдлаар, хуудсыг бүрэн ачаалсны дараа дахин тоглуулж эхэлнэ. Энэ зан үйлийг animation-delay шинж чанарыг ашиглан хянаж болно. Түүний утгыг секундээр тодорхойлно.

Чиглэл

Өөр нэг сонирхолтой шинж чанар бол хөдөлгөөнт дүрс юм. Анхдагчаар энэ нь хэвийн байна, хэрэв та үүнийг буцаах гэж тохируулсан бол бүх тайлбарласан фрэймүүд эсрэг чиглэлд ажиллах болно. Ямар ялгаа байгааг шалгацгаая. Үүнийг хийхийн тулд би өөр фрейм нэмснээр эффектийг бага зэрэг өөрчилсөн.

@keyframes pulse( 0%(фонтын хэмжээ: 50px;) 50%(фонтын хэмжээ: 60px;) 70%(фонтын хэмжээ: 80px;) 100%(фонтын хэмжээ: 50px;))

@keyframes импульс ( 0% (фонтын хэмжээ: 50px;) 50% (фонтын хэмжээ: 60px;) 70% (фонтын хэмжээ: 80px;) 100% (фонтын хэмжээ: 50px;))

Тиймээс хэвийн чиглэлтэй бол хөдөлгөөнт дүрсний эхний хагаст үсгийн хэмжээ 60 пиксел хүртэл нэмэгдэж, дараа нь 80 хүртэл огцом нэмэгдэж, дараа нь анхны байрлал руугаа буцах болно.

Цагаан будаа. 2. Эх текстийн хэмжээ

Цагаан будаа. 3. Үсгийн хэмжээ нь анхны төлөв рүүгээ гэнэт буцахаасаа өмнө хөдөлгөөнт дүрсийн бараг төгсгөлд байна.

Одоо бид асууж байна:

хөдөлгөөнт чиглэл: урвуу;

хөдөлгөөнт - чиглэл: урвуу;

Бүх зүйл орвонгоороо эргэв. Нэгдүгээрт, текст 30 хүртэл пикселээр, 80 хүртэл нэмэгдэж, бусад хөдөлгөөнт дүрсийн хувьд аажмаар буурч, эцэст нь өмнөх хэмжээ рүүгээ буцах болно. Энэ бол энгийн.

Хөдөлгөөнт дүрс

Энэ нь магадгүй хамгийн сонирхолтой тохиргоонуудын нэг бөгөөд та үүнийг удаан хугацаанд туршиж үзэх боломжтой. Анхдагч байдлаар, бүх өөрчлөлтийг ижил хурдаар гүйцэтгэдэг. Энэ төрлийн хөдөлгөөнт дүрсийг шугаман гэж нэрлэдэг бөгөөд үүнээс гадна бусад зүйл байдаг.

Сайн байцгаана уу, найзууд аа! Өнөөдөр бид маш сонирхолтой сэдвийг авч үзэх болно - бодит жишээ ашиглан CSS хөдөлгөөнт дүрс үүсгэх. Энэхүү зааварчилгааны оргил нь сая долларын логоны CSS-ийн гайхалтай хөдөлгөөнт дүрсийг бүтээх болно.

Сайхан байна

Ганцхан

Хичээлийн материал

• Эх сурвалж: Татаж авах
• Хичээлийн үндсэн жишээ: https://codepen.io/agragregra/pen/PKNavm
• Хичээлээс эхлэх загвар: https://github.com/agragregra/optimizedhtml-start-template

Бага зэрэг онол

Хөдөлгөөнт жишээ үүсгэж эхлэхээсээ өмнө үндсэн ойлголтуудыг судлах хэрэгтэй CSS хөдөлгөөнт дүрс, үндсэн нэр томъёо, шинж чанар, дүрмийг авч үзье CSS үүсгэххөдөлгөөнт дүрс.

Хэрэв та Adobe After Effects эсвэл хуучин Flash Professional (одоо) зэрэг ямар нэгэн программ дээр хөдөлгөөнт дүрс үүсгэж байсан туршлагатай бол. Adobe Animate), тэгвэл та "Түлхүүр хүрээ", "Түр зуурын функцууд эсвэл хөдөлгөөний динамик" гэх мэт ойлголтуудыг мэддэг байх ёстой бөгөөд энэ нь бусад хөдөлгөөнт дүрслэлийн нэгэн адил CSS ашиглан хуудасны элементүүдийн хөдөлгөөнт дүрслэлд хамаатай. Гэсэн хэдий ч, програмын интерфейстэй ажиллахаас ялгаатай нь та редактор дээр код бичих замаар CSS хөдөлгөөнт дүрсээ үүсгэдэг.

CSS дүрэм @keyframes

CSS хөдөлгөөнт дүрс үүсгэх нь хөдөлгөөнт дүрсийн нэрийг блок дотор зарлахаас эхэлдэг @keyframesмөн хөдөлгөөнт алхмууд буюу гол хүрээ гэж нэрлэгддэг зүйлсийг тодорхойлох.

Онол, үндсийг судлахын тулд бид цэвэр CSS ашиглах бөгөөд дараа нь илүү төвөгтэй жишээ ашиглан Sass-ийн урьдчилсан процессорыг ашиглах болно. Хичээлээс та Sass-ийн талаар илүү ихийг мэдэж болно. Нэмж дурдахад би CSS-ийн үндсийг илүү гүнзгий ойлгохын тулд "CSS-ийн үндэс - Бяцхан хүүхдүүдэд зориулсан гарын авлага" болон "Бүх CSS сонгогчид нэг хичээл" гэсэн хичээлүүдийг уншихыг зөвлөж байна.

@keyframes-ийн бүтэц болон түлхүүр фрэймүүдтэй ажиллахыг харцгаая энгийн жишээ:

@keyframes эргэх ( 0% ( хилийн радиус: 0 0 0 0; хувиргах: эргүүлэх(0deg); ) 25% ( хилийн радиус: 50% 0 0 0; хувиргах: эргүүлэх(45deg); ) 50% ( хүрээ- радиус: 50% 50% 0 0; хувиргах: эргүүлэх(90 градус); ) 75% ( хилийн радиус: 50% 50% 50% 0; хувиргах: эргүүлэх (135 градус); ) 100% ( хилийн радиус: 50% 50 % 50% 50%; хувиргах: эргүүлэх (180 градус); ) )

Эхний мөрөнд бид дараа нь үүнийг харж байна түлхүүр үг@keyframes нэр нь "эргэх". Энэ бол хүрээний фрэймийн блокийн нэр бөгөөд бид үүнийг цаашид авч үзэх болно.

Мэдэгдэлийн дараа буржгар хаалт нээгдэнэ (д энэ жишээнддээр цэвэр CSS), үүнд шинж чанаруудыг түлхүүр хүрээ тус бүрд 0% -аас 100% хүртэл дараалан бичнэ. 0% -аас 100% хооронд та 50%, 75% эсвэл бүр 83% ч бай аль болох олон завсрын утгыг оруулж болно гэдгийг анхаарна уу. Энэ нь хөдөлгөөнт програмын цагийн хуваарьтай маш төстэй бөгөөд та хоёр төлөвийн хооронд ямар ч завсрын төлөвийг нэмж болно.

Цаашилбал, түлхүүр фрэйм ​​бүхий энэ кодын блокыг ямар ч CSS сонгогч дээр ашиглаж болох боловч бид хүссэн блокоос тодорхой зан төлөвт хүрэхийг хүсч байвал тэдгээрийг ихэвчлэн тодорхой сонгогчид бэлтгэдэг.

Түлхүүр хүрээний блок руу нэвтрэх

Бид объектын гол фрэймүүдийг тохируулсны дараа (бодит амьдрал дээр энэ нь зэрэгцээ эсвэл түлхүүр хүрээ бүхий блок руу хандсаны дараа ч хийгддэг) бид шинээр үүсгэсэн блок руугаа хандаж болно. Дээрх жишээнээс дараах энгийн кодыг харцгаая.

Div (өргөн: 120px; өндөр: 120px; дэвсгэр өнгө: нил; захын зай: 100px; хөдөлгөөнт дүрс: 2с эргүүлэх 1 секундын хязгааргүй ээлжээр; )

Сүүлийн мөр хүртэл онцгой зүйл байхгүй. Энд бид объект хэрхэн харагдахыг тодорхойлж, блокийн сүүлчийн мөрөнд "эргэх" гэж нэрлэгддэг гол фрэймүүдийн блокыг заана.

Хөдөлгөөнт дүрс: 2 секундын 1 секундын төгсгөлгүй ээлжлэн эргүүлэх;

Хэрэв гол хүрээний тодорхойлолтод бүх зүйл харьцангуй тодорхой бол энэ мөрөнд яаралтай тайлбар хэрэгтэй. Бидний харж байгаагаар эхлээд ирдэг CSS өмч"хөдөлгөөнт дүрс". Энэ бол "маржин: 20px 30px 40px 50px" шинж чанар гэх мэт товчилсон хэлбэр бөгөөд үүнийг хэд хэдэн тусдаа шинж чанарт хувааж болно:

Энэ зүйрлэлээр "хөдөлгөөнт дүрс" нийлмэл шинж чанарыг хэд хэдэн тусдаа шинж чанарт хувааж болно.

хөдөлгөөнт нэр	@keyframes-аас ханддаг хөдөлгөөнт дүрсний нэр
хөдөлгөөнт дүрс - үргэлжлэх хугацаа	CSS хөдөлгөөнт дүрсийг гүйцэтгэх хугацаа эсвэл хэр удаан үргэлжлэх вэ. Секунд (с) эсвэл миллисекунд (мс)-ээр зааж өгч болно
хөдөлгөөнт-цаг хугацааны-функц	Түр зуурын функц, объектын хөдөлгөөний динамик эсвэл өмчийн өөрчлөлт ( хялбар- (анхдагчаар) хөдөлгөөнт дүрс аажмаар эхэлж, хурдасч, аажмаар дуусдаг; шугаман- хөдөлгөөнт дүрс жигд явагддаг; хялбар орох- аажим аажмаар эхэлж, сүүлчийн гол хүрээ рүү хурдасна; хөнгөвчлөх- хурдан эхэлж, эцэст нь жигд удааширдаг; хялбар орох- аажмаар эхэлж, аажмаар дуусна)
хөдөлгөөнт саатал	Хөдөлгөөнт дүрс эхлэхээс өмнө саатсан хугацаа. Мөн секунд эсвэл миллисекундээр тодорхойлогддог
хөдөлгөөнт-давталт-тоо	Хөдөлгөөнт дүрсийн давталтын тоо (давталт) хязгааргүй- хязгааргүй, эсвэл та нэгжгүйгээр энгийн тоог зааж өгч болно)
хөдөлгөөнт чиглэл	Хөдөлгөөнт дүрсний чиглэл, дараалсан, урвуу эсвэл урагшаа ( хэвийн- (анхдагчаар) хөдөлгөөнт дүрс эхнээсээ дуустал тоглож, зогсдог; ээлжлэн- эхнээс нь дуустал, эсрэг чиглэлд тоглодог; ээлжлэн урвуу- төгсгөлөөс эхнээс нь, араас нь тоглодог; урвуу- хөдөлгөөнт дүрсийг төгсгөлөөс нь тоглодог.)
хөдөлгөөнт-тоглох-төлөв	Хөдөлгөөнт дүрсийг тоглуулахыг удирдах ( түр зогсоосон(түр зогсоох), гүйж байна(эхлүүлэх) гэх мэт). Шаардлагатай бол: дээр хулганаар эсвэл JS функцээс хэрэглэж болно
хөдөлгөөнт бөглөх горим	Хөдөлгөөнт дүрсийг тоглуулахын өмнөх болон дараах элементийн төлөв. Жишээлбэл, үнэ цэнэ хойшоохөдөлгөөнт дүрсийг хэрэглэсний дараа бүх шинж чанарыг шууд анхны байдалд нь буцаах боломжийг танд олгоно

Ихэнх тохиолдолд туршлагатай хөгжүүлэгчид эдгээр бүх шинж чанарыг тусад нь бичдэггүй, гэхдээ богино тэмдэглэгээг ашигладаг бөгөөд бүтэц нь дараах байдалтай байна.

хөдөлгөөнт дүрс: (1. хөдөлгөөнт-нэр - нэр) (2. хөдөлгөөнт-үргэлжлэх хугацаа - үргэлжлэх хугацаа) (3. хөдөлгөөнт-цаг хугацаа-функц хөдөлгөөний динамик) (4. хөдөлгөөнт-хоцролт - эхлэхээс өмнө түр зогсоох) (5. хөдөлгөөнт-давталт- count - гүйцэтгэлийн тоо) (6. хөдөлгөөнт-чиглэл - чиглэл)

Хөдөлгөөнт дүрс: хөдөлгөөнт дүрсний нэр 2s шугаман 1s хязгааргүй урвуу

Жишээнээс бид @keyframes animationname блок руу нэвтэрч, хөдөлгөөнт дүрсийн үргэлжлэх хугацааг 2 секунд болгож, динамик нь шугаман, эхлэхийн өмнөх завсарлага 1 секунд, хөдөлгөөнт дүрс эцэс төгсгөлгүй давтагдаж, эсрэг чиглэлд хийгдэж байгааг харж байна.

Өмнө нь хэлсэнчлэн, богино тэмдэглэгээ нь өмчөөс эхэлдэг " хөдөлгөөнт дүрс", дараа нь утгуудын дарааллыг мартаж болохгүй, ингэснээр CSS хөдөлгөөнт дүрс бичихэд төөрөгдөл гарахгүй.

Гэсэн хэдий ч эдгээр шинж чанаруудын ихэнхийг орхигдуулж болно, учир нь тэдний анхдагч утгууд нь ихэнх хөдөлгөөнт дүрс үүсгэх ажлыг бүрэн хангадаг. Тэдгээрийн заримыг нь бичээгүй байж болох ч үлдсэнийг нь бидний өмнө дурдсан дарааллаар зааж өгөх ёстой. Ерөнхийдөө таны хөдөлгөөнт дүрсийг ажиллуулахын тулд нийлмэл шинж чанартаа зөвхөн хоёр параметр хэрэгтэй - нэр ( хөдөлгөөнт нэр) ба үргэлжлэх хугацаа ( хөдөлгөөнт дүрс - үргэлжлэх хугацаа).

CSS3 хөдөлгөөнт дүрс нь нэлээд өргөн хэрэглэгддэг. Хамгийн шинэхэн вэбсайт бүтээгчид хүртэл CSS хөдөлгөөнт дүрс гэж юу болох, түүнийг хэрхэн бүтээхийг ойлгох цаг болжээ. CSS3 хөдөлгөөнт дүрс нь блокуудыг хөдөлгөх зорилготой бөгөөд хүүхэлдэйн кино шиг харагддаг гэж та бодож магадгүй. Гэхдээ CSS хөдөлгөөнт дүрс нь зөвхөн нэг элементийг нэг цэгээс нөгөө цэг рүү шилжүүлэхээс гадна гажуудал болон бусад хувиргалтыг хийдэг. Үүнийг эхлэгчдэд ч ойлгомжтой болгохын тулд би бүх зүйлийг алхам алхмаар бичсэн.

1. CSS3 хөдөлгөөнт дүрсний үндсэн шинж чанарууд

CSS3-ийн аль шинж чанарууд нь хөдөлгөөнт дүрсийг хариуцдаг, мөн тэдгээр нь ямар утгыг авч болохыг ойлгох жижиг онолын блок.

• хөдөлгөөнт нэр- хөдөлгөөнт дүрсний өвөрмөц нэр (гол фрэймүүд, бид тэдгээрийн талаар доор ярих болно).
• хөдөлгөөнт дүрс - үргэлжлэх хугацаа- секундээр хөдөлгөөнт дүрс үргэлжлэх хугацаа.
• хөдөлгөөнт-цаг хугацааны-функц— хөдөлгөөнт дүрсийн хурдыг өөрчлөх муруй. Эхлээд харахад энэ нь маш тодорхойгүй байна. Үүнийг жишээгээр харуулах нь үргэлж хялбар байдаг бөгөөд та тэдгээрийг доороос харах болно. Дараах утгуудыг авч болно: шугаман | хялбар | хялбар | хөнгөвчлөх | куб-безьер(n,n,n,n) .
• хөдөлгөөнт саатал- хөдөлгөөнт дүрс эхлэхээс хэдхэн секундын өмнө саатах.
• хөдөлгөөнт-давталт-тоо- хөдөлгөөнт дүрсийн давталтын тоо. Үүнийг энгийн тоогоор зааж өгч болно, эсвэл та хязгааргүй гэж зааж өгвөл хөдөлгөөнт дүрс эцэс төгсгөлгүй ажиллах болно.

Таны анхны CSS3 хөдөлгөөнт дүрсийг бүтээхэд хангалттай үндсэн шинж чанарууд энд байна.

Бидний онолоос мэдэж, ойлгох ёстой хамгийн сүүлийн зүйл бол гол фреймүүдийг хэрхэн бүтээх явдал юм. Үүнийг хийхэд бас хялбар бөгөөд гол хүрээг зааж өгсөн @keyframes дүрмийг ашиглан хийдэг. Энэ дүрмийн синтакс нь дараах байдалтай байна.

Дээрээс нь бид эхний болон сүүлчийн хүрээг тавьсан. Бүх завсрын төлөвийг АВТОМАТААР тооцоолох болно!

2. Бодит CSS3 хөдөлгөөнт дүрсийн жишээ

Онол нь ердийнх шигээ уйтгартай бөгөөд үргэлж тодорхой байдаггүй. Бодит жишээ ашиглан бүх зүйлийг харах нь илүү хялбар байдаг, гэхдээ үүнийг тестийн HTML хуудсан дээр өөрөө хийх нь дээр.

Програмчлалын хэл сурахдаа та ихэвчлэн "Сайн уу, дэлхий!" програм бичдэг бөгөөд үүнээс та энэ хэлний синтакс болон бусад үндсэн зүйлийг ойлгох боломжтой. Гэхдээ бид програмчлалын хэл биш, тайлбарлах хэлийг судалж байна Гадаад төрхбаримт бичиг. Тиймээс бид өөрийн гэсэн "Сайн уу, дэлхий!"

Жишээлбэл, бид юу хийх вэ:Бидэнд ямар нэгэн блок бий болгоё