Кайра жаратуу үчүн 25 сонун CSS анимация мисалы

Автор: Peter Berry
Жаратылган Күнү: 18 Июль 2021
Жаңыртуу Күнү: 6 Май 2024
Anonim
Кайра жаратуу үчүн 25 сонун CSS анимация мисалы - Чыгармачыл
Кайра жаратуу үчүн 25 сонун CSS анимация мисалы - Чыгармачыл

Мазмун

Жакшы колдонулганда, CSS анимациясы укмуштуудай пайдалуу жана күчтүү курал. Бул кызыгууну же чыгармачыл толкунданууну кошуп, колдонуучунун көзүн багыттап, бир нерсени тез жана кыскача түшүндүрүп, колдонууну жакшырта алат. Ошол себептен, акыркы жылдары сайттарда жана тиркемелерде анимация көбөйүп кетти.

Бул макалада биз көргөн эң сонун CSS анимация мисалдарынын айрымдарын жалпылайбыз жана аларды кантип калыбына келтирүү керектигин көрсөтөбүз. Изилдөө үчүн бир катар тереңдетилген окуу куралдары жана шыктандыруучу эффекттер (жана алардын кодуна шилтемелер) жөнүндө окуңуз.

CSS анимациясы деген эмне?

CSS анимациясы - кээ бир HTML элементтерин анимациялоо ыкмасы, бул процессорду жана эс тутумга муктаж JavaScriptти же Flashты колдонбостон. Өзгөртүлө турган CSS касиеттеринин санына же жыштыгына чек жок. CSS анимациялары анимациянын негизги кадрларын көрсөтүү менен башталат: бул негизги кадрлар элементтин стилдерин камтыйт.


Анимацияга келгенде чектелгендей сезилсе да, CSS чындыгында күчтүү курал жана 60fps сонун жылмакай анимацияларды жасай алат. "Веб-сайтыңызга тереңирээк маани берген, терең ойлуу, анимациялык анимацияларды жеткирүү кыйынга турбайт", - дейт Адам Кун. "Заманбап CSS касиеттери эми колдонуучуларыңыз үчүн унутулгус окуяларды жаратуу үчүн керектүү шаймандардын бардыгын сунуштайт."

Эң мыкты анимациялар Диснейдин анимациясынын классикалык 12 принцибине негизделген - бул CSS анимациясынын мисалдарында бир нече жолу айтылганын көрө аласыз, андыктан баштоодон мурун ошол макаланы карап чыгыңыз. Мындан тышкары, мыкты анимацияланган музыкалык клиптерибиздин үлгүлөрүн жана илхамдарын көрүү үчүн, аларды карап көрүңүз.

Алтын эреже - CSS анимацияларыңыз ашыкча болбошу керек - кичинекей кыймыл деле чоң таасирин тийгизиши мүмкүн, ал эми колдонуучулардын көңүлүн алагды кылып, кыжырдантып жибериши мүмкүн. Бул жерде биздин сүйүктүү мисалдар жана аларды кантип калыбына келтирүү керек.


01. Көңүлдүү чычкан эффекти

  • Автор: Донован Хатчинсон

Бул сиздин чычканды ээрчип жүргөн кызыктуу эффект. Баракчаңыздагы бир элементке көңүл бургуңуз келсе, пайдалуу болушу мүмкүн.

Бул эффект үчүн бизге HTML абдан аз керек:

div> div> div> / div> / div> / div>

Биринчиден, демону орнотуп, 3D форматындагы трансформациялоонун келечегин белгилейбиз:

.demo {background-color: hsl (207, 9%, 19%); дисплей: flex; align-items: center; негиздөө-мазмун: борбор; бийиктик: 100vh; туурасы: 100%; } .perspective-container {perspective: 800px; }

Андан кийин биз жандандырууну каалаган дивди стилдеңиз:

.card {background-image: url (https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; көлөкө-көлөкө: 0 0 140px 10px rgba (0,0,0, .5); кызмат: салыштырмалуу; бийиктиги: 300px; туурасы: 500px; толуп кетүү: жашырылган; / * Шиндин кантип иштээрин көрүү үчүн, аны алып салууга аракет кылыңыз! * / --sheenX: 0; / * Буларды JavaScript менен орнотуңуз * / --sheenY: 0; }

Бул жерде биз фон коюп, андан кийин орноттук толуп кетүү чейин жашырылган ошентип биз кошо алабыз жылтырак кийинчерээк таасир этет. Биз дагы койду css өзгөрүлмө, sheenX жана sheYY.


Бул жылтыр өзгөрмөлөр жылтырак эффектин жайгаштырууга жардам берет. Аларды биздин картабызда колдонобуз кийин псевдоэлемент:

.card :: {мазмунунан кийин: ""; абалы: абсолюттук; top: -400px; оң: -400px; асты: -400px; солдо: -400px; өбөлгөлөрү: сызыктуу-градиент (217deg, rgba (255,255,255,0), rgba (255,255,255,0) 35%, rgba (255,255,255,0.25) 45%, rgba (255,255,255, .25) 50%, rgba (255,255,255) %, rgba (255,255,255,0) 100%); өзгөртүү: translateX (var (- sheenX)) translateY (var (- sheenY)); }

Бул жерде жасалма элемент идишке караганда чоңураак экенине ынанып жатабыз. Бул бизге үстүнөн жылып бир нерсе берет карта колдонуу өзгөртүү.

The өзгөртүү мулк биз буга чейин орноткон CSS өзгөрмөлөрүн колдонуп жатат. Биз аларды JavaScript менен орнотобуз. Алгач чычкан окуяларын угуу үчүн JavaScript орнотолу:

document.onmousemove = handleMouseMove;

Бизге азыр керек handleMouseMove иштетүү функциясы onmousemove:

function handleMouseMove (event) {const height = window.innerHeight; const width = window.innerWidth; // (-20, -20) (сол, төмөн) жана (20, 20) (оң, жогорку) const бурчтарын түзөт yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY ($ {yAxisDegree} deg) rotateX ($ {xAxisDegree} deg) '; // SheS позициясын койду setSheenPosition (event.pageX / width, event.pageY / width); }

Биздин функция терезенин бийиктиги менен туурасын алат жана X жана Y огунда бурч жаратат. Андан кийин аларды орноттук өзгөртүү биздин стили карта. Бул картаны чычканга негизделген бурчту берет!

Кийин псевдоэлементтин ордун белгилөө үчүн функцияны чакырабыз:

setSheenPosition функциясы (xRatio, yRatio) {// Бул xOffset = 1 - (xRatio - 0,5) * 800 жылтырыгынын ордун толтуруу үчүн ар бир багытта 400px чейин "аралыкты" жаратат; const yOffset = 1 - (yRatio - 0,5) * 800; target.style.setProperty (’- sheenX’, `$ {xOffset} px`) target.style.setProperty (’ - sheenY ’,` $ {yOffset} px`)}

Биздин псевдоэлемент чычкандын карама-каршы багытына өткөндө жакшы көрүнөт. Буга жетишүү үчүн -0,5тен 0,5ке чейинки санды түзөбүз, ал тескери багытта -1 катышын эсептөө менен өзгөрөт.

Биз бул санды эң чоң масштабга жеткирүү үчүн 800гө көбөйтөбүз 400px, биз канчалык алыс орноткон жылтырак тышындагы псевдоэлемент карта.

Акырында, биз бул офсеттик баалуулуктарды CSS өзгөрмө касиеттерибизге орноттук, ал эми калганын браузердин рендерери жасайт.

Азыр бизде чычканга караган карта бар, ал эми жылтырак эффектиси тескери багытта жылып жатат. Бул жагымдуу, көз жоосун алган эффектти жаратат.

02. Чоң ачып берүү

  • Автор: Адам Кун

Анимацияланган мазмунунун таасири учурда популярдуу болуп жаткандай сезилет жана туура колдонулганда, колдонуучулардын көңүлүн буруп, аудиторияны кызыктыра алышат. Буга чейин көрдүңүз эле: түстүү блок тигинен же тигинен горизонталдык же тигинен өсүп, андан кийин карама-каршы тарапка чегинип, бул жолу кандайдыр бир текстти же астындагы сүрөттү ачып берет. Бул татаал сезилиши мүмкүн, бирок бир нече нерсеге гана таянган түшүнүк.

Алгач, элементтин жайгашуусун орнотобуз (толук кодду бул жерден жүктөп алыңыз) - аны салыштырмалуу деп аныктаңыз (бул учурда статикалык гана иштебей калат). Тексттик учурларда автоматтык түрдө бийиктикке жана туурага уруксат берүү керек, бирок бир аз толтуруу зыян келтирбейт. Ошондой эле, биз баштапкы абалды колдонууну каалаган ата-эне элементинде трансформациянын келип чыгышын аныктайбыз. Биз башында элементтин жашырылышын каалагандыктан, аны кичирейтүү үчүн масштабдуу трансформацияны колдонобуз.

Андан кийин, ата-энебизди маскалоочу псевдо элемент, трансформациянын келип чыгышын карама-каршы вариантта орнотуу. Акырында, анимацияларды бир-бирине тизип, убакыт функцияларын же кечиктирүүнү колдонуп, ар бирин жылдырыңыз.

Эскертүү, биз ата-эненин жана псевдо-элементтин анимацияларын кечиктирип, текстти жашырган уячага, элемент толук көрүнүп бүткөндөн кийин гана ачып берүүнү кечиктирдик. Төмөндөгү Кодепен менен таанышыңыз.

03. Кыдырыңыз

  • Автор: Адам Кун

Ар кандай жеңилдетүүчү үзүндүлөрдүн татыктуу китепканасын топтой баштагандан кийин, анимацияңыздын тереңдигин жогорулатуунун башка жолдорун издөөгө мезгил келди, жана эң жакшы жолдордун бири - анимацияланган элементтердин ордун толтуруу.

JavaScript триггери жылдыруу абалына негизделген бир топ анимацияны баштоого орнотулган, бирок тандемде натыйжалуу кыймылдаган бардык нерселерди табуу үчүн, бул өтө эле көп кездешет. Бактыга жараша, CSS өзү анимацияланган тажрыйбаңызды жасай турган (же буза турган) жөнөкөй касиет менен камсыз кылат: анимациянын кечигүүсү.

Мисалы, колдонуучу жылдырганда кадрга жандыра турган сүрөттөрдүн торчосу бар дейли. Буга түрткү болуучу бир нече ыкмалар бар, сыягы, көрүү терезесине киргенде элементтерге класстарды кошо аласыз. Бул браузерде бир топ оор көтөрүлүш болушу мүмкүн, бирок контейнер элементине бир классты кошуу жана бала элементтериндеги анимациянын кечигүүсүн аныктоо менен гана алдын алууга болот.

Бул бизге SCSS же LESS сыяктуу алдын-ала иштетүүчүлөр үчүн өзгөчө жакшы колдонулат, бул бизге @for ар бир элемент аркылуу кайталоо үчүн цикл.

#parent {.child {animation: animationName 1.5s оңойлук менен 1 чабуулчу; @for $ i 1ден 20га чейин {&: nth-of-type (# {$ i}) {animation-delay: # {$ i / 10} s; }}}}

Бул жерде сиз SCSS менен көрө аласыз, биз алардын ар бирин карап чыга алабыз : nth-of-type тандап, андан кийин ар бир баланын санынын маанисине негизделген анимацияны кечиктирүүнү колдонуңуз. Мындай учурда, ар бир өсүштү секунданын бир бөлүгүнө чейин кыскартуу үчүн өз убактыбызды бөлүштүрөбүз. Сиздин анимацияланган элементтериңиздин ордун толтуруу анимацияңызга эмоцияны өрчүтө алса, өтө эле кечигүү менен, ал өзүнчө болуп сезилет. Төмөндө ушул CodePen караңыз.

04. Squigglevision

  • Автор: Адам Кун

SVG чыпкалары табигый, кол менен тартылган сезимге жетүү жана CSSдин айрым жалпак сезим чектөөлөрүнөн кутулуунун мыкты жолун сунуш кылат. Аларды жандандыруу эффектти дагы күчөтүшү мүмкүн.

Мисал: Squigglevision. Ооба, бул көпчүлүк аниматорлорго белгилүү техникалык термин эмес, бирок анын мультфильмдерде колдонулганын көрдүңүз. Бул жандуу элементтердин четтери бир аз кескин жана одоно гана эмес, тескерисинче, бул одоно чектер тез эле ар башкача болуп, кадрлардын беттеринен жулунуп, алып келип жаткандай сезилет. жашоо.

Мындай эффектке жетүү үчүн, биз бир нече фильтрлери бар жана ар биринин турбуленттүүлүк деңгээлдериндеги анча-мынча өзгөрүүлөрү бар SVG баракчабызга киргизсек болот. Андан кийин, анимациянын убакыт тилкесин орнотуп, ар бир чыпканы өзүнүн негизги фрейминде атайбыз. Убакыттын узактыгы менен ойноп туруу керек, анимациянын "секирип" кетишин күтүп жатабыз, бирок анын бөлүнүп-жарылгандай жай болушун же жинди болуп калышын каалабайбыз.

Ушул максатта, CSS SVG чыпкаларынын ортосунда бир калыпта өтүү мүмкүнчүлүгүнүн жоктугун белгилей кетүү маанилүү, анткени турбуленттүүлүк жана масштаб сыяктуу касиеттерге жетүү мүмкүнчүлүгү жок, анимациянын бул түрлөрү ар дайым кескин деп күтүлүшү керек.

05. Tumbling lettering

  • Боюнча күбө катары: Жылдын мыкты оюну
  • Автор: Леон күрөң

Google'дин Жылдын Оюну башкы баракчасында ойноок CSS анимациясын камтыйт, титулдук сөздөр бири-бирине кулап түшөт жана бири-бирине урунат. Бул жерде ал кандайча жасалды.

Биринчи кадам - ​​HTML менен веб-баракча документин аныктоо. Ал баш жана тулку бөлүктөрүн сактай турган HTML документ контейнеринен турат. Баш бөлүгү тышкы CSS жана JavaScript булактарын жүктөө үчүн колдонулса, тулку барактын мазмунун сактоо үчүн колдонулат.

! DOCTYPE html> html> head> title> Off Kilter Text Animation / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> script src = "code.js"> / script > / head> body> h1> Animated Title / h1> h1> Animated Title / h1> h1> Animated Title / h1> / body> / html>

Барактын мазмуну анимация эффектинин ар кандай вариацияларын көрсөткөн үч h1 аталышынан турат. Бул тегдерге каалаган текстти киргизүүгө болот, бирок алардын анимациясы класс атрибутундагы аттар менен аныкталат. Ушул класстын аталыштары үчүн презентация жана анимация орнотуулары CSSте кийинчерээк аныкталат.

Андан кийин, 'деп аталган жаңы файл түзүңүзcode.js’. Бардык элементтерди. Менен табууну каалайбыз жандуу класс жана түзүү массив ички тексттин ар бир сөзүн чагылдырган тизме. Анимациянын алгачкы кечиктирилиши да ушул кадамда аныкталат. Баракча толугу менен жүктөлмөйүнчө, баракчанын мазмуну иштебейт, андыктан бул код терезенин ичине жайгаштырылып жатат жүктөө иш-чаранын угуучусу.

Анимациянын сөздөрүнүн камтылышы а-нын ичине камтылышы керек аралык элемент. Бул үчүн, бар HTML мазмуну бош абалга келтирилет, андан кийин цикл колдонулуп, аныкталган 'сөздөрдүн' тизмесиндеги сөздү бир узундуктагы элемент кылат. Кошумча, an animationDay стили колдонулат - баштапкы кечигүүгө (төмөндө көрсөтүлгөн) жана сөздүн индексине карата эсептелген.

window.addEventListener ("load", function () {var delay = 2; var nodes = document.querySelectorAll (".animate")) for (var i = 0; inodes.length; i ++) {var words = түйүндөр [i ] .innerText.split (""); түйүндөр [i] .innerHTML = ""; үчүн (var i2 = 0; i2words.length; i2 ++) {var item = document.createElement ("span"); item.innerText = words [i2]; var calc = (delay + ((nodes.length + i2) / 3)); item.style.animationDelay = calc + "s"; nodes [i] .appendChild (item);}}});

Аттуу жаңы файл түзүңүз styles.css. Эми анимациядагы ар бир сөз элементинин бөлүгү боло турган презентация эрежелерин орнотобуз, алардын аралыгы менен башкарылат. Блок катары көрсөтүү, тексттин тегизделиши менен бириктирилгенде, ар бир сөз контейнердин ортосуна горизонталдык жактан тегизделген өзүнчө сапта пайда болот. Ага салыштырмалуу анимациялоо үчүн салыштырмалуу жайгаштыруу колдонулат текст агымы кызмат.

.animate span {display: block; кызмат: салыштырмалуу; текстке тегиздөө: борбор; }

Артка жана алдыга класска ээ болгон анимация элементтери аларга белгилүү бир анимацияны колдонушат. Бул кадам антеннанын негизги контейнеринде экөө тең болгон span элементтерине колдонула тургандыгын аныктайт жандуу жана артка же алдыга класс.

Ортосунда кандайча орун жок экендигин байкаңыз жандуу жана артка класс шилтемеси, демек, ата-эненин экөө тең болушу керек.

.animate.backwards> span {animation: animateBackwards 1s оңой-оңго чабуулдар; } .animate.forwards> span {animation: animateForwards 1s оңой-оңго чабуулдар; }

Аралаш анимация алдыга жана артка анимация үчүн колдонулган бирдей орнотууларды колдонуу менен аныкталат. Анимацияны ата-эненин ар бир баласына колдонуунун ордуна, n-бала алмаштыргыч анимация орнотууларын колдонуу үчүн селектор колдонулат. Артка анимация ар бирине карата колдонулат жада калса- сандык бала, ал эми алдыга жылдыруучу анимация ар бирине колдонулат так-сан бала.

.animate.mixed> span: nth-child (жуп) {animation: animateBackwards 1s оңойлоштуруп алдыга; } .animate.mixed> span: nth-child (тақ) {animation: animateForwards 1s оңойлоштуруп алдыга; }

Биз жаңы эле жараткан анимациялар баш тамга менен жасалган 'тартып’Баштапкы абалы, эч кандай тик абалы же айлануу жөндөө жок. The 'чейин’Позициясы - анимациянын акыркы абалы, ал элементтерди туураланган тик абалы жана айлануу абалы менен орнотот. Ар кандай анимацияларда тексттин окулбай калышын алдын алуу үчүн эки анимация үчүн бир аз башкача аяктоочу орнотуулар колдонулат.

@keyframes animateForwards {from {top: 0; өзгөртүү: айландыруу (0deg); } to {top: .9em; өзгөртүү: айландыруу (-15deg); }} @keyframes animateBackwards {from {top: 0; өзгөртүү: айлануу (0deg); } to {top: 1em; өзгөртүү: айлануу (25deg); }}

06. Flip book

  • Автор: Адам Кун

CSS менен анимация жасоодо кээде жөнөкөй ыкма керек. Флип китепке караганда анимациянын жөнөкөй ыкмалары аз. Колдонуу кадамдар () биздин убакыт функциясы катары, биз бул эффектти кайталай алабыз. Бул кескин угулушу мүмкүн жана биздин суюктукту сактоо боюнча миссиябызга түздөн-түз карама-каршы келсе дагы, туура ылдамдык менен ал органикалык сезилиши мүмкүн.

Ошентип, ал кандайча иштейт? Биз анимацияны жеңилдетүү функциясын бир нече кошумча параметрлер менен аныктайбыз - анимациябызга канча кадам керектигин жана биринчи кадамдын кайсы мезгилинде баштаарыбызды айтып беребиз. (башталат) - мисалы, бир аз окшош кадамдар (10, баштоо).

Негизги кадрларыбызда эми анимациянын акыркы чекитин белгилей алабыз: мисалы, анимациябыз 10 секундага созулуп, 10 кадамды колдонуп жатабыз. Бул учурда, ар бир кадам бир секундага созулуп, дароо эле кийинки секунда алкагына өтүп, ортосунда эч кандай өтүү болбойт.

Дагы, бул суюктуктун алдында учуп бараткандай сезилет, бирок бул жерде баскычтуу анимациялар жаркырап көрүнөт. Биз спрайт баракчасы аркылуу кайталап, флип-китеп сыяктуу кадрларды жандандыра алабыз. Бирдей өлчөмдөгү кадрларды аныктап, аларды бирден-бир горизонталдык (же вертикалдык) сүрөткө топтоо менен, биз бул сүрөттү элементтин фону катары орнотуп, анимациябыздын акыркы чекити катары пикселди же пайыздык фон абалын аныктай алабыз, бул ар бирине бир кадам жасоого мүмкүндүк берет алкак. Андан кийин спрайт баракчасы орун которуштуруп, жаңы фондук сүрөтү менен кадрдын алкагын кадрдын ичине толтурат.

Келгиле, бир мисалга токтололу. Бул учурда анимацияланган буттардын айрым топтомдору айрым тексттик белгилерге кошулган. Биринчиден, анимациянын аталышын, узактыгын, кадам санын, баштапкы абалын жана кайталоо санын аныктайбыз:

анимация: жөө күлүк 0,75с кадам (32, аягы) чексиз;

Дагы бир айта кетүүчү нерсе, узактыгы 32 кадр үчүн бир секундга жетпеген убакытта салыштырмалуу тез. Андан кийин, биз негизги кадрларыбызды аныктайбыз:

@keyframes чуркоочу {{background-position: 0px 50%;} дан {background-position: - 1280px 50%; }}

Сүрөттүн вертикалдык жайгашуусу ырааттуу болгондугуна көңүл буруңуз, бул спрайттар туурасынан 1280px жалпы туурасы боюнча горизонталдык түрдө созулуп жаткандыгын билдирет. Ошол сүрөт үчүн 32 жалпы алкакты аныктадык, ошондуктан ар бир кадрдын туурасы 40px болушу керек деп жыйынтык чыгарсак болот. Төмөндө ушул Кодепен менен таанышыңыз.

Белгилей кетүүчү нерсе, чоң спрайт баракчасы иштин кескин төмөндөшүнө алып келиши мүмкүн, андыктан сүрөттөрдү көлөмдөп жана кысып коюңуз. Жакшы иштелип чыккан спрайт баракчасы жана ылайыктуу анимация узактыгы менен, сиз эми татаал кыймылдарды жеткире алган жылмакай анимацияга ээ болосуз.

07. Көбүктөрдү үйлөө

  • Боюнча күбө катары: 7UP
  • Кодду көрүү
  • Автор: Стивен Робертс

7UP'те камтылган CSS көбүктүү анимациясы бренд темасын веб-сайттын дизайнына өткөрүүнүн сонун мисалы. Анимация бир нече элементтерден турат: көбүкчөлөрдүн SVG ‘чиймеси’ жана андан кийин ар бир көбүккө колдонулган эки анимация.

Биринчи анимация көбүктүн тунук эместигин өзгөртүп, көрүү терезесинде тигинен жылдырат; экинчиси, кошумча реализмдин солкулдатуучу таасирин жаратат. Ар кандай көбүктү бутага алуу жана ар кандай анимациянын узактыгын жана кечигүүсүн колдонуу менен жылдыруулар иштелип чыгат.

Көбүктөрүбүздү түзүү үчүн SVG колдонобуз. Биздин SVGде көбүктүн эки катмарын жаратабыз: бири чоңураак көбүкчөлөр үчүн, экинчиси кичинекей көбүкчөлөр үчүн. SVG ичине бардык көбүктөрүбүздү көрүү терезесинин ылдый жагына жайгаштырабыз.

g stroke-width = "7"> g transform = "translate (10 940)"> чөйрө cx = "35" cy = "35" r = "35" /> / g> ... / g> g соккулары- width = "4"> g transform = "translate (147 984)"> айлана cx = "15" cy = "15" r = "15" /> / g> / g> ... / g>

SVGлерибизге эки башка анимацияны колдонуу үчүн, экөө тең трансформация касиетин колдонуп, анимацияларды өзүнчө элементтерге колдонушубуз керек. The g> SVGдеги элемент HTMLдеги div сыяктуу колдонсо болот; ар бир көбүктү (буга чейин бир топто) топтун тегине орошубуз керек.

g> g transform = "translate (10 940)"> чөйрө cx = "35" cy = "35" r = "35" /> / g> / g>

CSS анимациянын күчтүү кыймылдаткычына жана татаал анимацияларды жаратуу үчүн жөнөкөй кодго ээ. Көбүрүктү экранга жылдырып, анимациянын башында жана аягында өчүп-өчүп калуу үчүн тунуктугун өзгөртүп баштайбыз.

@keyframes жогору {0% {тунуктук: 0; } 10%, 90% {тунуктук: 1; } 100% {тунуктук: 0; өзгөртүү: translateY (-1024px); }}

Термелүүчү эффектти жаратуу үчүн, көбүктү оңго жана солго жылдырышыбыз керек, болгону керектүү өлчөмдө - анимация өтө эле көңүлдү оорутуп, ажырап калат, ал эми анча-мынча нерсе байкалбай калат. Эксперимент анимация менен иштөөдө маанилүү.

@keyframes солкулдайт {33% {transform: translateX (-50px); } 66% {transform: translateX (50px); }}

Көбүктөрүбүзгө анимацияны колдонуу үчүн, мурун колдонгон топторду жана алардын жардамы менен колдонобуз n-түрү ар бир көбүктүн тобун өзүнчө аныктоо. Биз көбүкчөлөргө жана тунуктукка маанини колдонуудан баштайбыз өзгөрөт аппараттык ылдамдатууну пайдалануу максатында менчик.

.bubbles-large> g {opacity: 0; will-change: transform, opacity;}. bubbles-large g: nth-of-type (1) {...} .... bubbles-small g: nth-of-type (10) {...}

Бардык анимация убакыттарын жана кечигүүлөрүн бири-биринен эки секунда ичинде сактап, аларды чексиз кайталай тургандай кылып орнотууну каалайбыз. Акырында, биз колдонобуз жеңилдетүү бир аз табигый көрүнүшү үчүн, термелүүчү анимациябызга убакыт функциясы.

.bubbles-large g: nth-of-type (1) {animation: up 6.5s sons; } .bubbles-large g: nth of-type (1) circle {animation: wobble 3s infinite ease-in-out; } ... көбүкчөлөр-кичинекей g: n-түрдөгү (9) тегерек {анимация: 3s wobble 3s 275ms чексиз жеңилдик; } .bubbles-small g: nth-of-type (10) {animation: up 6s 900ms infinite;}

08. Жылдыруу чычкан

  • Боюнча күбө катары: Baltic Training
  • Кодду көрүү
  • Автор: Стивен Робертс

Чычканды жылдырган анимация колдонуучу веб-сайтка биринчи жолу түшкөндө, багыт бере алат. HTML элементтерин жана касиеттерин колдонуу менен ишке ашырса да, SVG колдонобуз, анткени бул сүрөт тартууга көбүрөөк ылайыктуу.

Биздин SVG ичине бурчтары тегеректелген төрт бурчтук жана жандана турган элементтин тегерекчеси керек, SVGди колдонуп, биз каалаган өлчөмгө чейин сөлөкөттү масштабда көтөрө алабыз.

svg xmlns = "..." viewBox = "0 0 76 130" preserveAspectRatio = "xMidYmid meet"> g fill = "none" fill-rule = "evenodd"> rect width = "70" height = "118" x = "1.5" y = "1.5" stroke = "# FFF" stroke-width = "3" rx = "36" /> circle cx = "36.5" cy = "31.5" r = "4.5" fill = "# FFF" /> / g> / svg>

Эми биз SVGди түздүк, контейнердеги сүрөтчөнүн көлөмүн жана ордун көзөмөлдөө үчүн бир нече жөнөкөй стилдерди колдонушубуз керек. Шилтемени SVG чычканына ороп, экрандын ылдый жагына жайгаштырдык.

.scroll-link {абалы: абсолюттук; асты: 1рем; сол жакта: 50%; өзгөртүү: translateX (-50%); } .mouse {max-width: 2.5rem; туурасы: 100%; бийиктик: авто; }

Андан кийин анимациябызды түзөбүз. Биздин анимациянын 0 жана 20 пайызында, элементибиздин башталгыч абалын орноткубуз келет. Ал жолдун 20% түзүп, чексиз кайталанганда, ал бир аз убакытка токтоп калат.

@keyframes жылдыруу {0%, 20% {transform: translateY (0) scaleY (1); }}

Биз тунуктуктун башталуучу чекитине кошуп, андан кийин Y абалын жана вертикалдык масштабды 100% белгисине которушубуз керек, анимациянын аягы. Биз жасашыбыз керек болгон эң акыркы нерсе - айланабыз өчүп калышы үчүн тунуктугун төмөндөтүү.

@keyframes жылдыруу {... 10% {тунуктук: 1; } 100% {transform: translateY (36px) scaleY (2); тунуктук: 0.01; }}

Акырында, биз анимацияны тегерекке колдонобуз, ошондой эле ‘transform-Origin’ касиети жана өзгөрөт жабдууну тездетүүгө мүмкүндүк берүүчү касиет. Анимация касиеттери өзүн-өзү түшүндүрүп берет. The куб-безер убакыт функциясы алгач тегеректи биздин чычкан формабыздын ылдый жагына түшүрүүдөн мурун артка тартуу үчүн колдонулат; бул анимацияга көңүлдүү сезим кошот.

.scroll {анимация-ат: жылдыруу; анимациянын узактыгы: 1,5 сек; animation-timing-function: куб-безер (0.650, -0.550, 0.250, 1.500); анимация-кайталоо-эсептөө: чексиз; трансформация келип чыгышы: 50% 20.5px; өзгөрөт: өзгөрөт; }

09. Жандуу жазуу

  • Боюнча күбө катары: Сегиз бак
  • Кодун көрүү жолдор жана текст
  • Автор: Стивен Робертс

Сегиз бакча веб-сайтында анимациянын жалпы ыкмасы колдонулат, анын жардамы менен текст жазылып алынат. Натыйжага жетүү үчүн SVGге кайрылабыз. Башында, биз SVG түзөбүз. Бул жерде эки ыкма бар: аларды жандандыруу же SVG текстин колдонуу үчүн текстти жолдорго которуу. Эки ыкманын тең оң жана терс жактары бар.

Биздин негизги кадр анимацияны түзүүдөн баштаңыз. Аны аткарышыбыз керек болгон бирден-бир функция - бул инсульт-дашоффет. Эми анимациябызды түздүк, анимациялоону каалаган баалуулуктарды колдонушубуз керек. Биз орноттук инсульт-dasharray, инсультта боштуктарды жаратат. Биздин инсультту бүтүндөй элементти камтый турганчалык чоң мааниге ээ кылып, акырындап сызыктын узундугу менен сызыкты жылдырабыз.

Сыйкыр биздин анимацияны колдонгондо болот. Офисти жандандыруу менен, биз штрихти көз алдыга келтиребиз - чийме эффектин жаратабыз. Биз элементтердин бир-бирден тартылышын каалайбыз, кээ бир элементтердин чиймесинин аягы менен экинчисинин чийилишинин башталышынын ортосунда айрымдары дал келип калат. Буга жетишүү үчүн биз Sass / SCSS жана кайрылабыз n-түрү ар бир тамганы анимациянын жарымынын узундугуна, ошол тамганын ордуна көбөйтсөңүз болот.

10. Учуучу куштар

  • Боюнча күбө катары: Fournier Père et Fils
  • A кодун көрүү жалгыз куш же бүтүндөй отор
  • Автор: Стивен Робертс

Биз толугу менен түз вектордук сызыктардан баштайбыз, анимациянын ар бир кадрын чийип, учуунун башкача абалын чагылдырган. Андан кийин вектордук чекиттерди иштетип, сызыктарды жана четтерди тегеректейбиз. Акыры, биз ар бир кадрды бирдей өлчөмдөгү кутуга салып, жанаша жайгаштырабыз. Файлды SVG катары экспорттоо.

HTML орнотуусу чындыгында жөнөкөй. Бир нече анимацияны колдонуу үчүн, биз ар бир кушту идишке ороп алышыбыз керек - бири кушту учуш үчүн, экинчиси экран аркылуу жылдырышы керек.

div> div> / div> / div>

SVG чымчыгыбызды биздин куш div үчүн фон катары колдонуп, ар бир кадр кандай өлчөмдө болушун кааласак. Жаңы фондук абалды болжол менен эсептөө үчүн биз туурасын колдонобуз. SVGде 10 уяча бар, ошондуктан биз туурабызды 10го көбөйтүп, андан кийин туура көрүнгөнгө чейин бир аз өзгөртөбүз.

.bird {background-image: url (’bird.svg’); background-size: auto 100%; туурасы: 88px; бийиктиги: 125px; өзгөрөт: фон-позиция; } @keyframes учуу цикли {100% {background-position: -900px 0; }}

CSS анимациясында сиз билбеген бир нече фокус бар. Биз колдоно алабыз animation-timing-function сүрөттү кадамдар менен көрсөтүү - анимацияны элестетүү үчүн дептердеги баракчаларды барактап чыгуу сыяктуу.

анимация-ат: fly-цикл; animation-timing-function: кадамдар (10); анимация-кайталоо-эсептөө: чексиз; анимациянын узактыгы: 1с; анимациянын кечигүүсү: -0.5s;

Эми биз учуу циклибизди түзүп алдык, учурда канатыбыз учуп жүрөт, бирок эч жакка кетпейт. Аны экран аркылуу жылдыруу үчүн, биз дагы бир негизги кадр анимациясын жаратабыз. Бул анимация кушту экранда туурасынан жылдырат, ошондой эле вертикалдык абалын жана масштабын өзгөртүп, чымчыкты реалдуу кыдырууга мүмкүнчүлүк берет.

Анимацияларды жараткандан кийин, аларды колдонушубуз керек. Биз канаттууларыбыздын бир нече нускаларын түзүп, анимациянын ар кандай убакыттарын жана кечигүүлөрүн колдонсок болот.

.bird - бир {анимациянын узактыгы: 1с; анимациянын кечигүүсү: -0.5s; } .bird - эки {анимациянын узактыгы: 0.9с; анимациянын кечигүүсү: -0.75с; }

11. Менин гамбургеримди кесип өтүңүз

  • Боюнча күбө катары: Better Brand Agency
  • Кодун көрүү аралыгы жана SVG
  • Автор: Стивен Робертс

Бул анимация желеде колдонулуп, үч сапты кайчылаш же жакын сүрөтчөгө айландырат.Жакынкы мезгилге чейин көпчүлүк HTML элементтерин колдонуу менен ишке ашырылып келген, бирок чындыгында SVG ушул сыяктуу анимацияга ылайыкташтырылган - баскычтар кодун бир нече аралык менен толтуруунун кажети жок.

Жандуу мүнөзгө жана SVGге жана анын навигацияланган DOMуна байланыштуу, анимацияны же которулушту аткаруу коду өтө эле аз өзгөрүлөт - техникасы бирдей.

Биз төрт элементти түзүүдөн баштайбыз, мейли ал дивдин ичинде болсун же SVG ичиндеги жолдор болсун. Эгерде биз аралыкты колдонуп жаткан болсок, анда аларды div ичине жайгаштыруу үчүн CSSти колдонуу керек; эгер биз SVG колдонуп жаткан болсок, анда буга чейин кам көрүлгөн. Биз 2 жана 3-саптарды борборго жайгаштырууну каалайбыз - бири-биринин үстүнө - ал эми 1 жана 4-саптарды жогору жана төмөн жагында бирдей аралыкта жайгаштырып, трансформациянын келип чыгышын борборлоштургула.

Биз эки касиетке өтүүгө ишенебиз: тунуктук жана айлануу. Биринчиден, биз 1 жана 4-саптарды өчүргүбүз келет, аларды колдонуп бутага алабыз : nth-child селектор.

.menu-icon.is-active {element-type}: nth-child (1), .menu-icon.is-active {element-type}: nth-child (4) {opacity: 0; }

Эки орто сызыкты бутага алып, аларды карама-каршы багытта 45 градуска айландыруу гана калды.

.menu-icon.is-active {element-type}: nth-child (2) {transform: rotate (45deg); } .menu-icon.is-active {element-type}: nth-child (3) {transform: rotate (-45deg); }

12. Чөйрөлөрдүн артынан сая түшүү

  • Боюнча күбө катары: Better Brand Agency
  • Кодду көрүү
  • Автор: Стивен Робертс

Жандуу жүктөө сүрөтчөсү төрт чөйрөдөн турат. Чөйрөлөрдө толтуруу жок, бирок кезек-кезеги менен түстөр бар.

svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 340 340"> чөйрө cx = "170" cy = "170" r = "160" stroke = "# E2007C" / > circle cx = "170" cy = "170" r = "135" stroke = "# 404041" /> circle cx = "170" cy = "170" r = "110" stroke = "# E2007C" /> чөйрө cx = "170" cy = "170" r = "85" stroke = "# 404041" /> / svg>

Биздин CSSте биз бардык чөйрөлөргө бир нече негизги касиеттерди коюп, андан кийин : nth-of-type башка колдонууга селектор инсульт-dasharray ар бир чөйрөгө.

тегерек: n-түрү (1) {строка-dasharray: 550; } тегерек: nth-of-type (2) {stroke-dasharray: 500; } чөйрө: n-түрү (3) {инсульт-dasharray: 450;} айлана: n-түрү (4) {инсульт-dasharray: 300; }

Андан кийин, биз негизги кадр анимацияны түзүшүбүз керек. Биздин анимация чындыгында жөнөкөй: бизге тегеректи 360 градуска айландыруу жетиштүү. Биздин трансформацияны анимациянын 50% белгисине жайгаштыруу менен, айлана дагы баштапкы абалына кайтат.

@keyframes алдын ала жүктөгүч {50% {айландыруу: айландыруу (360дег); }}

Биздин анимацияны жаратуу менен, эми аны өз чөйрөлөрүбүзгө колдонушубуз керек. Биз анимациянын атын койдук; узактыгы; кайталоо саны жана убакыт функциясы. "Оңой чыгып кетүү" анимацияга ойноок сезим берет.

анимация-ат: алдын ала жүктөгүч; анимациянын узактыгы: 3 сек; анимация-кайталоо-эсептөө: чексиз; animation-timing-function: оңой чыгып кетүү;

Учурда бизде жүктөгүч бар, бирок бардык элементтер бир эле учурда айланып турат. Муну оңдоо үчүн, бир нече кечигүүнү колдонобуз. Sass for loop аркылуу кечигүүлөрүбүздү түзөбүз.

@for $ i 1ден 4кө чейин {&: nth-of-type (# {$ i}) {animation-delay: # {$ i * 0.15} s; }}

Кечигүүлөрдөн улам, биздин чөйрө эми кезеги менен жандана баштады жана бири-бирин кууган чөйрөлөрдүн элесин жаратууда. Бул жерде бирден-бир көйгөй баракка алгач жүктөлгөндө, тегерекчелер туруктуу болуп, андан кийин кезек-кезеги менен кыймылдай баштайт. Биз ошол эле офсеттик эффектке жетише алабыз, бирок анимациябыздагы каалабаган тыныгууну токтотуп, кечигүүлөрдү терс мааниге коюңуз.

анимациянын кечигүүсү: - # {$ i * 0.15} с;

Кийинки бет: Көбүрөөк CSS анимация мисалдары

Мурунку Макала

Биринчи курстун студенти катары оюндан алдыга чыгыңыз
Кийинки Макалада

Жакшы сүрөткө тартуу үчүн 2021-жылдагы эң мыкты штативдер
Кызыктуу Макалалар
Интернеттеги нерселер үчүн сонун нерселерди кантип курса болот
Окуу

Интернеттеги нерселер үчүн сонун нерселерди кантип курса болот

Май 2024
Санарип сүрөтчү eb Lee-Deli le ачылыш ачкычын жеткирет Generate London 21-сентябрда. Эки күндүк конференцияда Антон жана Айрин, Зелл Лив, Хайме Леви, Стив Фишер жана башка көптөгөн мыкты баяндамачылар...
Атмосфералык оюн чөйрөсүн түзүү
Окуу

Атмосфералык оюн чөйрөсүн түзүү

Май 2024
Оюн искусствосун түзүүдө, атмосфера негизги орунду ээлейт, ал тургай мыкты сүрөт түзөтүүчү программа жана Illu trator окуу куралдары сиз үчүн муну аткара албайт. Бул чыгарма A a in' Creed yndicate...
Дизайнер катары узак мансапка жетүү үчүн 10 кадам
Окуу

Дизайнер катары узак мансапка жетүү үчүн 10 кадам

Май 2024
Сиз азыр дүйнөнүн чокусундасыз; мыкты кардарлар, укмуштуудай долбоорлор жана мыкты сайылган портфолио. Ошентсе да, артыңда момун суроо пайда болот. Муну түбөлүк кыла аламбы? Менде дагы 30-40 жыл барбы...