Веб-ресурстарды әзірлеу тәжірибесі екі маңызды тенденцияға әкелді: жылдамдық және сапа идеясы. Біріншісі әзірлеушіге өз жұмысын жылдам орындауға міндеттейді, екіншісі мақсатқа сай шекараны анықтайды.

Келуші сайтқа кірген кезде белгілі бір мақсат қояды және заттардың қайда екендігі және олардың қалай жұмыс істеуі керектігі туралы жалпы қабылданған идеяларды басшылыққа алады. Әзірлеуші ​​өз жұмысын өзіне ыңғайлы етіп жасай алады, бірақ ол назар аударуға мүдделі болса көбіреккелушілер болса, олардың пікірімен санаспау орынсыз.

Анимацияның синтаксисі мен семантикасы

CSS анимация қасиетін пайдалану оңай және қызықты әсерлерді жылдам жасауға мүмкіндік береді. Веб-беттің элементтері келушілер күткендей заманауи түрде жұмыс істеуі үшін ерекше өнертапқыш болу және өз анимация опцияларын жасау қажет емес. Барлығы күтілген және талап етілгендей анықтама бойынша жұмыс істейді.

Бұл мысал екі элементті сипаттайды. Біріншісі - оңға қарай жылжитын және өлшемі бойынша пропорционалды өсетін индикатор жолағы. Екінші элемент - жай оңға жылжитын сурет.

Мұнда барлық кадрлар көрсетілмейді. Бұл жағдайда мүлік біркелкі жүзеге асырылады. Бетке кіруші сызық көлемінің ұлғаюымен және кескіннің қозғалысымен біркелкі қозғалысты байқайды. Оңай кіру түрінің орнына әртүрлі қозғалыс опцияларын пайдалану арқылы қозғалысты басқаруға болады. Оңайлау опциясы басында жеделдету және соңында тежеуді береді, бірақ басқа қозғалыс опциясын таңдауға болады.

Элементтердің қабаттасуы және өзара әрекеттесуі

Анимация қасиеті бар барлық элементтер CSS арқылы бір-бірінен және беттің жалпы ағынынан тәуелсіз өңделеді. Егер элементтер бір-бірінің үстіне қойылса, онда әсерлер комбинациясы және нәтижесінде жаңа әсер алынады.

Егер анимация процесінде элементтер қасиеттерді өзгертсе, онда түсті қабаттасудың заңдылығына байланысты сіз екі немесе үш элемент арқылы өте түпнұсқа әсерлерді ала аласыз.

Элементтің дизайны үлкен маңызға ие. Келтірілген мысалда жолақ екі жолдың түсі әртүрлі болатын суреттен жасалған. Жолақтың өлшемі ұлғайған кезде ара қозғалса, ол қозғалатын толқын болып табылады. Сызықтарды және олардың еңістерін өңдеу арқылы графиканың жалпы заңдарына сәйкес әсерлер жасауға болады.

Анимация уақытын өзгерту стандартты емес шешімдерге де әкеледі. Элементтің айналдыру функциясы сияқты түрлендіру сипатын пайдалану бастапқы өзгерістерді жасайды. Мысалы:

Мұнда жолақ өзінің сыртқы түрін мөлдір емес күйден мөлдір күйге үздіксіз өзгертеді. Төменгі сурет тек пішінді өзгертеді.

Ақпаратты анимациялау

CSS-те: мәтіндік анимацияның ерекше мәні бар. Мәтін әрқашан мағынаға ие және белгілі бір мақсат үшін веб-бетте болады. Бірақ мәтін әрқашан суретке қарағанда аз ақпарат береді және көп орын алады.

Дұрыс жазылған мәтінді келушінің адекватты түрде қабылдайтынына кепілдік кескінді дұрыс түсіну үмітінен әлдеқайда жоғары, әсіресе сайт дизайнерінің мағынаны білдіру формалары туралы өзіндік идеясы болған кезде.

Егер бұрын, CSS анимациясы макет әлеміне жаңадан енген кезде, жылжымалы сызықтар, жыпылықтайтын сағаттар және пульсирленген мәтіндер танымал болса, онда заманауи веб-сайт құруда келесі принцип қалыпты болып саналады: келушіні тітіркендірмей, веб-ресурстың функционалдығын ұсыныңыз. мүмкіндігінше тиімді.

Бұл тұрғыда жоғарыда келтірілген мысалдардың кез келгенін ұсынуға ыңғайлы мәтіндік ақпарат, бірақ CSS-ті 3D анимация ретінде пайдалану опциясы ең практикалық болып табылады.

Мұнда «қалыпты» күйде мәтін аз орын алады. Негізгі сөзді бөлектеуге немесе мағынасын көрсетуге болады. Тінтуір мәтін аймағына тигеннен кейін ол CSS 3D анимациясынан қалыпты оқылатын күйге дейін кеңейеді.

3D дизайнымен біріктірілген кеңістікті үнемдейтін опция ақпаратты ықшам орналастыруға мүмкіндік береді. Босатылған орынды басқа немесе байланысты мақсаттар үшін пайдалануға болады. CSS анимациясының арқасында қажетті ақпарат қажетті уақытта қолжетімді болады.

Тұтынушы анимациясының опциясы

Сапалы веб-ресурстарды жасаудағы елеулі табыстар әлі де бір таңқаларлық сұрақты назардан тыс қалдырады: веб-сайт дизайны неліктен әзірлеушіні алаңдатады?

Сайт өнер туындысы немесе эстетикалық мақсаттағы шығармашылық процестің нәтижесі емес. Веб-сайт - бұл, ең алдымен, иесінің (әзірлеушінің) пікірінше, оған жаңа келушілерді әкелетін және өз клиенттерімен жұмыс істеу мүмкіндігін беретін функционалдылық.

Өнімді сату, қызмет көрсету, осы немесе басқа жұмыстарды орындау... Келуші тауар, қызмет және жұмыс үшін келеді. Дизайн және анимация маңызды, бірақ келушінің пікірі иесінің (әзірлеушінің) пікірінен маңыздырақ.

Егер кәдімгі дүкенде сатып алушы әрқашан дұрыс болса, онда неліктен интернет-дүкенде ол барлық әзірлеуші ​​ұсынған дизайн нұсқасы арқылы ойлағандай істеу керек? CSS контекстіндегі анимация - тамаша құрал, бірақ неге сәл ілгері кетпеске: қанша тұтынушылар болса, функционалдылық пен дизайнды көрсетудің көптеген нұсқалары.

«Тұтынушы анимациясы» опциясы – әзірлеуші ​​не ұсынса, бұрынғы тұтынушылар не таңдады және қазіргі тұтынушы не ойлап тапты.

Бұл жинақта ең жақсы және жоғары сапалы CSS мүмкіндіктері бар. Мұнда сіз тек таза CSS көмегімен бәрін дерлік жасауға болатынын дәлелдеуге тырысатын әйгілі макет дизайнерлері мен дизайнерлерінің әртүрлі және таңғажайып демонстрациялық мысалдары мен әдістерін таба аласыз. Сондай-ақ, осы жерден мұндай туындыны қалай жасауға болатынын егжей-тегжейлі айтатын бірнеше сабақтарды таба аласыз. Бұл жинақ сізге пайдалы болады деп үміттенемін.

CSS 3D бұлттары

Бұл демонстрацияда сіз 3D форматында сәнді бұлттарды жасай және өңдей аласыз. Бұл CSS бұлттары бізге веб-технологиялардың мүмкіндіктері шексіз екенін анық көрсетеді.

Таза CSS логотиптері

Бұл тек таза CSS көмегімен жасалған логотиптердің мысалдары. Өзіңіз ойлап көріңізші, оны жасауда ешбір бейне қолданылмаған. Бұл жай ғана нәрсе.

CSS анимациясы бар алфавит

CSS-ті әліпбиде пайдаланудың тамаша және көркем үлгісі

Сайт үшін 3D навигациясы

Сайтқа арналған қарапайым, бірақ өте стильді шарлау жолағы, әрине, тек CSS3 көмегімен жасалған. суреттер немесе сценарийлер жоқ.

CSS көмегімен Google Doodle

Көптеген дудлдердің бірі Google іздеу жүйесі, CSS-те жасалған. Бұл CSS анимациясын жақсы пайдаланудың тамаша мысалы.

Слайдер

Жақсы жасалған және жоғары сапалы кескін сырғытпасы. Плюс демонстрациядағы 4 мысал.

Қос анимациялық сақина

CSS коды көп емес әдемі анимациялық және түрлі-түсті сақина

CSS-те бұлыңғыр

Маған қатты ұқсайды қажетті сүзгі, әсіресе ол таза CSS-де жасалғандықтан. Бұлыңғырлықты пайдалану арқылы пайдаланушының назарын белгілі бір нүктеге аударуға болады.

Flexbox-қа арналған толық нұсқаулық

Бұл мақала жауап беретін Flexbox блоктары туралы. Бұл мақала ағылшын тілінде болса да, бұл блоктар туралы толығымен айтады.

CSS3 көмегімен түрлі-түсті және анимациялық мәзір

Белгішелері бар веб-сайтқа арналған әдемі ашылмалы мәзір. Үлкен плюс - ол толығымен CSS-те жасалған.

CSS сүзгілері

Қолданбаны сипаттайтын ағылшын тіліндегі жоғары сапалы материал CSS сүзгілерібейнелерге.

CSS пішіндері

Көптеген мысалдармен CSS пішіндері туралы жазба

CSS-тегі орындалу жолақтары

Таза CSS және анимация көмегімен стильді прогресс жолақтарын жасау туралы сабақ. Сондай-ақ мысалды қарап, дереккөздерді жүктеп алуға болады.

Анимация - Animate.css

Қазіргі уақытта Интернеттегі ең танымал CSS анимациялық жобасы. Мүмкін, ең қарапайым және жоғары сапалы, сонымен қатар тегін.

Барлық заманауи браузерлер, IE9-тен басқа, JavaScript-ті қолданбай, CSS көмегімен анимацияны жүзеге асыруға мүмкіндік беретін CSS ауысулары мен CSS анимацияларын қолдайды. Анимация кез келген html элементтеріне, сондай-ақ псевдоэлементтерге қолданылады :бұрынЖәне :кейін

Браузерді қолдау

IE: 10.0
Firefox: 16,0, 5,0 -моз-
Chrome: 43.0, 4.0 -вебкит-
Сафари: 4.0 -вебкит-
Опера: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -вебкит-
Opera Mini: -
Android браузері: 44, 4.1 -вебкит-
Android жүйесіне арналған Chrome: 44

Жобаңызда анимацияны пайдалану үшін сізге екі әрекетті орындау қажет:

1. @keyframes кілт сөзі арқылы анимацияның өзін жасаңыз
2. Оны анимациялау қажет элементке қосыңыз және қажетті қасиеттерді көрсетіңіз.

@keyframes ережесі

Ереже @keyframesнегізгі фреймдер – белгілі бір уақыт мезетіндегі нысанның күйлері арқылы анимация жасауға мүмкіндік береді.

Анимациялық перне кадрлары кілт сөздер арқылы жасалады бастапЖәне дейін(0% және 100% мәндеріне баламалы) немесе қалағаныңызша орнатуға болатын пайыздық нүктелерді пайдалану. Біріктіруге де болады кілт сөздержәне пайыздық пункттер.

бастапқы болса ( бастап, 0%) немесе соңғы ( дейін, 100% жақтау, браузер олар үшін анимациялық сипаттардың есептелген мәндерін анимация қолданбаған кездегідей орнатады.

Екі негізгі кадрдың селекторлары бірдей болса, келесісі алдыңғысынан бас тартады.

Сипаттан кейін бірден анимацияны анықтау кезінде @keyframesосы анимацияның аты болуы керек ( берілген атаусодан кейін анимацияланатын элементтің анимация сипатында көрсетілуі керек).

@keyframes жылжыту ( бастап ( түрлендіру: translateX(0px); ) 50% ( түрлендіру: translateX(130px); ) 100% (түрлендіру: translateX(0px); ) )

@keyframes жылжытады ( бастап ( 50% { 100% { түрлендіру: translateX(0px);

Біз келесідей жұмыс істейтін анимация жасадық:

1. Анимацияның басталуы ( бастап 0% жазылуы мүмкін еді - элементтің Х осі бойындағы орны 0px;
2. Анимацияның ортасы (50%) - элементтің X осі бойындағы орны 130px;
3. Анимацияның соңы ( дейінбіз 100% қолдандық - біз элементті анимацияның басына қайтарамыз, яғни. элементтің X осінің орны 0px;

Мұнда және төменде ыңғайлы болу үшін мысалдарда элементте анимациясы бар классты кезекпен қосатын немесе алып тастайтын JavaScript-тің бірнеше жолын жаздым, анимацияны ойнату үшін осы элементті басыңыз.

Негізгі кадрларды топтастыруға болады:

@keyframes жылжытады ( ( түрлендіру: translateX(0px); ) 25%, 50% (түрлендіру: translateX(130px); ) 100% (түрлендіру: translateX(0px); ) )

@keyframes жылжытады ( бастап ( түрлендіру: translateX(0px); 25%, 50% { түрлендіру: translateX(130px); 100% { түрлендіру: translateX(0px);

Бір элементке бірнеше анимация тағайындауға болады, олардың аттары және параметрлері тағайындау ретімен жазылуы керек:

элемент ( анимация-атауы: анимация-1, анимация-2; анимация-ұзақтығы: 2сек, 4сек; )

элемент( анимация-атауы : анимация-1, анимация-2 ; анимация ұзақтығы: 2сек, 4сек;

Анимацияны элементке қосу екі пәрмен арқылы орындалады - анимация атауыЖәне анимация-ұзақтығы.

Анимация атауы

Меншік анимация атауыанимацияның атын анықтайды. Анимацияның мәнін көрсететін атауды пайдалану ұсынылады және бос орын немесе астын сызу _ арқылы біріктірілген бір немесе бірнеше сөзді пайдалануға болады.

анимация атауы: жылжыту;

Уақыт функциясы

Меншік анимация-уақыт-функциясыанимацияны ойнату жылдамдығына жауапты арнайы функцияны орнатуға мүмкіндік береді. Анимацияны ойнату жылдамдығы көбінесе сызықты емес екенін ескеріңіз, яғни. оның әртүрлі аймақтардағы лездік жылдамдығы әр түрлі болады. Қосулы қазірБұл ереже үшін қазірдің өзінде орнатылған бірнеше дәлелдер бар: жеңілдігі, жеңілдігі, жеңілдету , оңай кіру, сызықтық , қадамдық бастау , қадам соңы.

Дегенмен, мұндай функцияларды өзіңіз жасай аласыз. Арнайы функция куб-безье(P1x, P1y, P2x, P2y); төрт аргумент қабылдайды және анимация процесі кезінде олардың негізінде мәнді бөлу қисығын құрастырады. Сіз өзіңіздің жеке функцияларыңызды жасауға машықтана аласыз және олардың осы сайтта қалай жұмыс істейтінін көре аласыз.

Соңында, анимацияны функцияның көмегімен дискретті мәндер жинағына айналдыруға болады қадамдар(қадамдар саны, бағыт), оның аргументтері оның қадамдарының санын және мәндерді қабылдай алатын бағытын көрсетеді бастаунемесе Соңы .

• жеңілдігі- әдепкі функция, анимация баяу басталады, тез жылдамдайды және соңында баяулайды. куб-безье(0,25,0,1,0,25,1) сәйкес келеді.
• сызықтық— анимация жылдамдықтың ауытқуынсыз барлық уақыт бойы біркелкі жүреді; куб-безье(0,0,1,1) сәйкес келеді.
• жеңілдігі— анимация баяу басталып, соңында бірқалыпты жылдамдатады; куб-безьеге (0,42,0,1,1) сәйкес келеді.
• жеңілдету— анимация жылдам басталып, соңында бірқалыпты баяулайды; куб-безье(0,0,0,58,1) сәйкес келеді.
• оңай кіру— анимация баяу басталып, баяу аяқталады; куб-безьеге (0,42,0,0,58,1) сәйкес келеді.
• куб-безье(x1, y1, x2, y2)- жоғарыдан қараңыз.
• мұрагер— бұл сипатты тектік элементтен алады.

Көрнекі салыстыру

Кешіктірілген анимация

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

элемент ( анимацияның аты: анимация-1; анимацияның ұзақтығы: 2 с; анимацияның кешігуі: 10 с; // бұл анимация басталғанға дейін 10 секунд өтеді)

Анимацияны қайталау

Меншік анимация-итерация-саныанимацияны бірнеше рет іске қосуға мүмкіндік береді. Мұрагерлік емес. Мәнді кез келген оң мәнге орнатыңыз 1, 2, 3 … т.б. немесе шексізшексіз қайталау үшін. Мағынасы 0 немесе кез келген теріс сан анимацияны ойнатудан жояды.

Біз мұны жақында көрдік ауысулар- бұл жай ғана жол анимацияларстиль қасиеттерінен түпнұсқадейін финалжағдай.

Сонымен, CSS-тегі ауысулар нақтыанимация түрі, мұнда:

• тек екі күй бар: басы және аяқталуы;
• анимация циклге қосылмаған;
• аралық күйлер тек уақыт функциясымен басқарылады.

Бірақ егер қаласаңыз:

• бақылауға ие болу аралықмемлекеттер?
• цикланимация?
• үшін әртүрлі анимация түрлерін жасаңыз бірэлемент?
• тек арнайы сипатты жандандыру жартысыжолдары?
• еліктеу әртүрлі уақыт функцияларыәртүрлі қасиеттер үшін?

CSS-тегі анимация осының бәрін және т.б. жасауға мүмкіндік береді.

Анимация - бұл шағын фильм сияқты, онда сіз режиссер ретінде актерларыңызға нұсқаулар (стиль ережелері) бересіз ( HTML элементтері) әртүрлі көріністер үшін (негізгі кадрлар).

Анимация сипаттары

өту сияқты, анимация қасиеті де болып табылады қысқартылғанбасқалары үшін:

• animation-name : анимация атауы;
• animation-duration : анимация қанша уақытқа созылады;
• animation-timing-function : аралық күйлер қалай есептеледі;
• animation-delay : анимация біраз уақыттан кейін басталады;
• animation-iteration-count : анимация қанша рет орындалуы керек;
• анимация-бағыт : қозғалыс қарама-қарсы бағытта жүре ме, жоқ па;
• анимация толтыру режимі: анимация басталғанға дейін және аяқталғаннан кейін қандай стильдер қолданылады.

Жылдам мысал

Жүктеп алу түймешігін анимациялау үшін анимация жазуға болады секіру:

@keyframes серпілу( 0% (төменгі: 0; қорап-көлеңке: 0 0 5px rgba(0,0,0,0,5); ) 100% (төменгі: 50px; қорап-көлеңке: 0 50px 50px rgba(0,0, 0,0,1);

Алдымен @keyframes көмегімен нақты серпіліс анимациясын жазып, оны шақыру керек.

пайдаландым қысқартылғананимация сипаты және барлық ықтимал опцияларды қамтиды:

• анимация атауы: серпілу (негізгі кадр атауымен бірдей)
• анимация ұзақтығы: 0,5 с (жарты секунд)
• анимация-уақыт-функциясы: куб-безье(0,1,0,25,0,1,1)
• анимациялық кешігу: 0с (кідіріссіз)
• анимация-итерация саны: шексіз (шексіз ойнайды)
• анимация бағыты: балама (алға және артқа жүреді)
• анимацияны толтыру режимі: екеуі де

@keyframes

HTML элементтеріне анимацияны қолданбас бұрын сізге қажет негізгі кадрларды пайдаланып анимация жазу. Жалпы алғанда, негізгі кадрлардың әрқайсысы аралық қадаманимацияда. Олар пайыздар арқылы анықталады:

• 0% - анимацияның бірінші қадамы;
• 50% - анимациядағы жарты қадам;
• 100% - соңғы қадам.

Сондай-ақ, сәйкесінше 0% және 100% орнына from және to кілт сөздерін пайдалануға болады.

33%, 4% немесе тіпті 29,86% сияқты қалағаныңызша көптеген негізгі кадрларды анықтауға болады. Іс жүзінде сіз олардың кейбірін ғана жазасыз.

Әрбір негізгі кадр болып табылады CSS ережесі, бұл сіз жаза алатыныңызды білдіреді CSS сипаттарыәдеттегідей.

Анимацияны анықтау үшін онымен @keyframes кілт сөзін жазыңыз аты:

@keyframes айналасында ( 0% (сол жақта: 0; жоғарғы: 0; ) 25% (сол жақта: 240px; жоғарғы: 0; ) 50% (сол жақта: 240px; жоғарғы: 140px; ) 75% (сол жақта: 0; жоғарғы: 140px ) 100% (сол жақта: 0; жоғарғы: 0; ) ) p (анимация: шамамен 4с сызықтық шексіз; )

Басталуы 0% және аяқталуы 100% болатынын ескеріңіз бірдей ережелер CSS. Бұл анимацияның тамаша айналуын қамтамасыз етеді. Итерация есептегіші шексіз күйіне орнатылғандықтан, анимация 0%-дан 100%-ға дейін, содан кейін бірден өтеді. артқа 0%-ға дейін және т.б. шексіз.

анимация атауы

Атыанимация кем дегенде пайдаланылады екі рет:

• сағ жазу@keframes көмегімен анимациялар;
• сағ пайдалану animation-name сипатын (немесе анимацияның стенографиялық сипатын) пайдаланып анимация.

@keyframes whatever ( /* ... */ ) .selector ( анимация атауы: кез келген; )

CSS класс атауларына ұқсас, анимация атауы тек мыналарды қамтуы мүмкін:

• әріптер (a-z);
• сандар (0-9);
• астын сызу(_);
• дефис (-).

Атау бір немесе екі сызықшадан басталуы мүмкін емес.

анимация-ұзақтығы

Өту ұзақтығы сияқты анимация ұзақтығын орнатуға болады секунд(1с) немесе миллисекундтар(200 мс).

Селектор ( анимация ұзақтығы: 0,5 с; )

Әдепкі мән - 0s, бұл мүлде анимация жоқ дегенді білдіреді.

анимация-уақыт-функциясы

Уақытты ауыстыру функцияларына ұқсас, анимация уақытын белгілеу функцияларын пайдалана алады кілт сөздер, мысалы, сызықтық , жеңілдетілген немесе еріктілердің көмегімен анықталуы мүмкін Безье қисықтары.

Селектор (анимация-уақыт-функциясы: жеңіл енгізу; )

Әдепкі мән: жеңіл.

CSS-тегі анимация негізгі кадрларды пайдаланатындықтан, орнатуға болады сызықтықуақыт функциясы және имитациялаунақты Безье қисығын анықтау арқылы көптеген өте нақтынегізгі кадрлар. Жетілдірілген анимация үшін Bounce.js файлын қараңыз.

анимация – кешігу

Өту кідірісі сияқты, анимация кідірісін орнатуға болады секунд(1с) немесе миллисекундтар(200 мс).

Әдепкі мәні 0s, бұл ешқандай кідірістің жоқтығын білдіреді.

Бірнеше анимацияларды қосқанда пайдалы сериясы.

A, .b, .c ( анимация: серпілу 1 с; ) .b ( анимацияның кешігуі: 0,25 с; ) .c ( анимацияның кешігуі: 0,5 с; )

анимация-итерация-саны

Әдепкі бойынша, анимация тек ойнатылады бір рет(1-мән). Мәндердің үш түрін орнатуға болады:

• 2 немесе 3 сияқты бүтін сандар;
• анимацияның жартысын ғана ойнайтын 0,5 сияқты бөлшек сандар;
• анимацияны шексіз қайталайтын шексіз кілт сөз.

.selector ( анимация-итерация-санау: шексіз; )

анимациялық бағыт

Анимация-бағыт қасиеті не екенін анықтайды қандай ретпеннегізгі кадрлар оқылады.

• қалыпты : 0% басталады, 100% аяқталады, қайтадан 0% басталады.
• кері : 100% басталады, 0% аяқталады, қайтадан 100% басталады.
• балама : 0%-дан басталады, 100%-ға өтеді, 0%-ға қайтарылады.
• балама-кері : 100%-дан басталады, 0%-ға өтеді, 100%-ға қайтарылады.

Мұны елестету оңайырақ, егер анимация итерациясының саны шексіз деп орнатылса.

анимацияны толтыру режимі

Анимацияны толтыру режимі не болатынын анықтайды бұрынанимацияның басталуы және кейіноның аяқталуы.

Анықтау кезінде негізгі кадрларнақтылауға болады CSS ережелері, ол әртүрлі анимация қадамдарында қолданылады. Енді бұл CSS ережелері мүмкін соқтығысадыкіммен қолданылғананимациялық элементтерге.

анимация толтыру режимі браузерге егер болса, білуге ​​мүмкіндік береді анимация стильдері Сондай-аққолданылуы керек анимациядан тыс.

Елестетіп көрейік түймесі, ол:

• қызыләдепкі;
• айналады көканимацияның басында;
• және соңында жасыланимация аяқталған кезде.

CSS анимацияларыбір CSS мәнері конфигурациясынан екіншісіне өтуді жандандыруға мүмкіндік береді.Анимациялар екі компоненттен, CSS анимациясын сипаттайтын стильден және анимация стилінің басталу және аяқталу күйлерін, сондай-ақ ықтимал аралық нүктелерді көрсететін негізгі кадрлар жиынтығынан тұрады.

CSS анимацияларының дәстүрлі сценарийге негізделген анимация әдістеріне қарағанда үш негізгі артықшылығы бар:

1. Оларды қарапайым анимациялар үшін пайдалану оңай; сіз оларды JavaScript-ті білмей-ақ жасай аласыз.
2. Анимациялар қалыпты жүйе жүктемесінде де жақсы жұмыс істейді. Қарапайым анимациялар жиі JavaScript-те нашар жұмыс істейді (егер олар жақсы жасалмаса). Рендеринг механизмі өнімділікті мүмкіндігінше тегіс ұстау үшін кадрды өткізіп жіберуді және басқа әдістерді пайдалана алады.
3. Браузерге анимациялар ретін басқаруға рұқсат беру браузерге, мысалы, қазір көрінбейтін қойындыларда іске қосылған анимациялардың жаңарту жиілігін азайту арқылы өнімділік пен тиімділікті оңтайландыруға мүмкіндік береді.

Анимацияны конфигурациялау

CSS анимация тізбегін жасау үшін анимация сипатымен немесе оның ішкі сипаттарымен анимацияланатын элементті мәнерлейсіз. Бұл уақытты, ұзақтығын және анимация тізбегі қалай жүруі керектігі туралы басқа мәліметтерді конфигурациялауға мүмкіндік береді. Бұл жасайды еместөменде сипатталғандай @keyframes ережесі арқылы орындалатын анимацияның нақты көрінісін конфигурациялаңыз.

animation-name Анимацияның негізгі кадрларын сипаттайтын @keyframes ережесінің атын көрсетеді.

animation-duration Бір циклды аяқтау үшін анимацияға кететін уақыт ұзақтығын конфигурациялайды.

animation-timing-функциясы Анимация уақытын теңшейді; яғни жеделдету қисықтарын орнату арқылы анимация негізгі кадрлар арқылы қалай ауысады.

animation-delay Элементтің жүктелу уақыты мен анимация тізбегінің басы арасындағы кідірісті теңшейді. animation-iteration-count Анимацияның қайталану санын конфигурациялайды; анимацияны шексіз қайталау үшін шексіз көрсетуге болады.

animation-direction Анимация дәйектілік бойынша әрбір жүгіруде ауыспалы бағытты немесе бастапқы нүктеге қалпына келтіруді және өзін қайталауды конфигурациялайды.

анимация толтыру режимі Анимация орындалғанға дейін және одан кейін қандай мәндер қолданылатынын конфигурациялайды.

animation-play-state Анимация ретін кідіртуге және жалғастыруға мүмкіндік береді.Негізгі кадрлар арқылы анимация тізбегін анықтау

Анимацияның уақытын теңшегеннен кейін анимацияның сыртқы түрін анықтау керек. Бұл @keyframes ережесін пайдаланып екі немесе одан да көп негізгі кадрларды орнату арқылы жасалады. Әрбір негізгі кадр анимация тізбегі кезінде берілген уақытта анимацияланған элементтің қалай көрсетілетінін сипаттайды.

Анимацияның уақыты анимацияны конфигурациялайтын CSS мәнерінде анықталғандықтан, негізгі кадрлар пайыздық мәнді білдіретін CSS деректер түрін пайдаланады. Ол көбінесе элементтің негізгі нысанына қатысты өлшемді анықтау үшін пайдаланылады. Көптеген сипаттар ені биіктігі жиегін толтыру және қаріп өлшемі сияқты пайыздарды пайдалана алады.>

@keyframes сырғыту ( ( шеті-сол: 100%; ені: 300%; ) дейін ( жиегі-солға: 0%; ені: 100%; ) )

Шынжыр табан мен Алиса біраз уақыт үнсіз бір-біріне қарап тұрды: ақырында шынжыр қальянды аузынан алып, оған ыңғайсыз, ұйқылы дауыспен сөйледі.

Анимацияның стенографиясын қолдану

Анимацияның стенографиясы кеңістікті үнемдеу үшін пайдалы. Мысал ретінде, біз осы мақалада қолданатын ереже:

P ( анимация-ұзақтығы: 3с; анимация-атауы: slidein; анимация-итерация-саны: шексіз; анимация-бағыты: балама; )

ауыстырылуы мүмкін

P (анимация: 3s шексіз балама слайд; )

Бірнеше анимация сипаты мәндерін орнату

CSS анимациясының ұзындық мәндері үтірмен бөлінген бірнеше мәндерді қабылдай алады - бұл мүмкіндікті бір ережеде бірнеше анимацияларды қолданғыңыз келсе және бөлек ұзақтықтарды, итерация сандарын және т.б. орнатқыңыз келгенде пайдалануға болады. әртүрлі анимациялар үшін. Әр түрлі ауыстыруларды түсіндіру үшін бірнеше жылдам мысалдарды қарастырайық:

Бұл бірінші мысалда бізде үш анимация атауы бар, бірақ тек бір ұзақтық пен итерация саны бар. Бұл жағдайда барлық үш анимацияға бірдей ұзақтық пен итерация саны беріледі:

Анимация атауы: fadeInOut, moveLeft300px, серпілу; анимация ұзақтығы: 3с; анимация-итерация саны: 1;

Бұл екінші мысалда бізде барлық үш сипатқа орнатылған үш мән бар. Бұл жағдайда әрбір анимация әрбір сипаттағы бірдей позициядағы сәйкес мәндермен орындалады, сондықтан, мысалы, fadeInOut 2,5 с ұзақтығы және итерация саны 2 және т.б.

Анимация атауы: fadeInOut, moveLeft300px, серпілу; анимацияның ұзақтығы: 2,5 с, 5 с, 1 с; анимация-итерация-саны: 2, 1, 5;

Бұл үшінші жағдайда көрсетілген үш анимация бар, бірақ тек екі ұзақтық пен итерация саны. Мұндай жағдайларда бар жеткіліксізәрбір анимацияға жеке мән беру үшін мәндер, мәндер басынан аяғына дейін айналады. Мысалы, fadeInOut 2,5 секунд және moveLeft300px 5 секунд ұзақтығын алады. Қол жетімді ұзақтық мәндерінің соңына жеттік, сондықтан біз басынан қайта бастаймыз - серпіліс 2,5 секундқа созылады. Итерация саны (және сіз көрсеткен кез келген басқа сипат мәндері) дәл осылай тағайындалады.

Анимация атауы: fadeInOut, moveLeft300px, серпілу; анимация ұзақтығы: 2,5 с, 5 с; анимация-итерация саны: 2, 1;

Анимациялық оқиғаларды пайдалану

Анимация оқиғаларын пайдалану арқылы анимацияларды қосымша бақылауға, сондай-ақ олар туралы пайдалы ақпаратты алуға болады. AnimationEvent нысанымен ұсынылған бұл оқиғаларды анимациялардың қашан басталғанын, аяқталғанын және жаңа итерацияны бастағанын анықтау үшін пайдалануға болады. Әрбір оқиға оның болған уақытын, сондай-ақ оқиғаны тудырған анимацияның атауын қамтиды.

Әрбір анимация оқиғасы орын алған кезде ол туралы кейбір ақпаратты шығару үшін сырғымалы мәтін үлгісін өзгертеміз, осылайша олардың қалай жұмыс істейтінін көре аламыз.

CSS қосу

Біз анимация үшін CSS жасаудан бастаймыз. Бұл анимация 3 секундқа созылады, «слайд» деп аталады, 3 рет қайталанады және әр жолы ауыспалы бағытта болады. @keyframes ішінде ені мен сол жақ жиегі элементті экран бойымен сырғыту үшін өңделеді.

Слайд (анимация ұзақтығы: 3с; анимация атауы: slidein; анимация-итерация-саны: 3; анимация-бағыты: балама; ) @keyframes слайды ( бастап ( маржа-сол:100%; ені:300%) ) дейін ( маржа -сол жақ:0% ені:100%;

Анимациялық оқиға тыңдаушыларын қосу

Біз барлық үш ықтимал анимация оқиғасын тыңдау үшін JavaScript кодын пайдаланамыз. Бұл код оқиға тыңдаушыларын конфигурациялайды; біз оны реттеу үшін құжат бірінші рет жүктелген кезде атаймыз.

Var element = document.getElementById("watchme"); element.addEventListener("animationstart", тыңдаушы, жалған); element.addEventListener("animationend", тыңдаушы, жалған); element.addEventListener("анимациялау", тыңдаушы, жалған); element.className = "слайд";

Бұл өте стандартты код; оның қалай жұмыс істейтіні туралы мәліметтерді eventTarget.addEventListener() құжаттамасынан ала аласыз. Бұл код жасайтын соңғы нәрсе - біз «slidein» анимациялайтын элементке класс орнату; біз мұны анимацияны бастау үшін жасаймыз.

Неліктен? Өйткені animationstart оқиғасы анимация басталған бойда іске қосылады, ал біздің жағдайда бұл біздің код іске қосылғанға дейін орын алады. Сонымен, біз анимацияны элементтің класын фактіден кейін анимацияланатын стильге орнату арқылы өзіміз бастаймыз.

Оқиғаларды қабылдау

Оқиғалар төменде көрсетілген тыңдаушы() функциясына жеткізіледі.

Функция тыңдаушы(оқиға) ( var l = document.createElement("li"); switch(event.type) ( case "animationstart": l.innerHTML = "Басталды: өткен уақыт " + event.elapsedTime; үзіліс; регистр " animationend": l.innerHTML = "Аяқталды: өткен уақыт " + event.elapsedTime; break; case "animationiteration": l.innerHTML = "Жаңа цикл " + event.elapsedTime; break; ) document.getElementById(" шығыс").appendChild(l); )

Бұл код та өте қарапайым. Анимация оқиғасының қай түрі орын алғанын анықтау үшін ол жай ғана event.type файлына қарайды, содан кейін элементке сәйкес жазбаны қосады, әдетте таңбаланған тізім ретінде көрсетілетін элементтердің ретсіз тізімін көрсетеді.">

(ретсіз тізім) біз осы оқиғаларды тіркеу үшін қолданамыз.

Барлығы айтылған және жасалған кезде нәтиже келесідей болады:

• Басталды: өткен уақыт 0
• Жаңа цикл 3.01200008392334 уақытында басталды
• Жаңа цикл 6.00600004196167 уақытында басталды
• Аяқталды: өткен уақыт 9,234000205993652

Уақыттар анимация конфигурацияланған кезде белгіленген уақытты ескере отырып күтілгенге өте жақын, бірақ дәл емес екенін ескеріңіз. Сондай-ақ, анимацияның соңғы итерациясынан кейін анимацияны қайталау оқиғасы жіберілмейтінін ескеріңіз; орнына animationend оқиғасы жіберіледі.

HTML

Толық болу үшін мұнда бет мазмұнын көрсететін HTML берілген, оның ішінде сценарий қабылданған оқиғалар туралы ақпаратты енгізетін тізім:

Менің қозғалғанымды бақылаңыз

Бұл мысал жасау үшін CSS анимацияларын пайдалану жолын көрсетеді H1элементтер бет бойымен қозғалады.

Оған қоса, анимация оқиғасы іске қосылған сайын мәтінді шығарамыз, осылайша сіз оларды әрекетте көре аласыз.

Міне, тікелей эфир.

Ескерту: Анимацияны көру үшін бетті қайта жүктеңіз немесе CodePen ортасында анимацияны көру үшін CodePen түймесін басыңыз.

Facebook
Twitter
ВКонтакте
Google+
Қалай жұмыс істеу керек