25 страхотни примера за CSS анимация за пресъздаване

css анимация мишка пример
(Изображение на изображението: Донован Хътчинсън)
Страница 1 от 2: CSS уроци за анимация

Използвана добре, CSS анимацията е изключително полезен и мощен инструмент. Той може да добави интерес или творческо вълнение, да насочи погледа на потребителя, да обясни нещо бързо и кратко и да подобри използваемостта. Поради тази причина през последните години се наблюдават все повече анимации на сайтове и в приложения.

В тази статия събираме някои от най-страхотните примери за CSS анимация, които сме виждали, и ви показваме как да ги пресъздадете. Прочетете за редица задълбочени уроци и вдъхновяващи ефекти (и връзки към техния код), които да проучите.

Какво е CSS анимация?

CSS анимацията е метод за анимиране на определени HTML елементи, без да се налага да използвате процесор и жаден за памет JavaScript или Flash. Няма ограничение за броя или честотата на CSS свойствата, които могат да бъдат променени. CSS анимациите се инициират чрез определяне на ключови кадри за анимацията: тези ключови кадри съдържат стиловете, които елементът ще има.



Въпреки че може да изглежда ограничено, когато става въпрос за анимация, CSS всъщност е наистина мощен инструмент и е в състояние да произвежда красиво плавни 60fps анимации. „Предоставянето на внимателни, плавни анимации, които допринасят значителна дълбочина на вашия сайт, не трябва да бъде трудно“, казва уеб разработчикът отпред, Адам Кун. „Модерните CSS свойства сега ви предоставят почти всички инструменти, от които се нуждаете, за да създадете запомнящо се изживяване за вашите потребители.“

Най-добрите анимации все още имат своите корени в класиката на Дисни 12 принципа на анимацията - ще видите няколко споменавания за това в тези примери за CSS анимация, така че си струва да разгледате тази статия, преди да започнете. Може също да искате да разгледате нашия кръг от страхотни анимирани музикални видеоклипове за допълнителни примери и вдъхновение.

Златното правило е, че вашите CSS анимации не трябва да се преувеличават - дори малко движение може да има голямо въздействие и твърде много може да разсейва и дразни потребителите. Ето нашите любими примери и как да ги пресъздадем.

01. Забавен ефект на мишката

Това е забавен ефект, който следва мишката наоколо. Може да е полезно, когато искате да привлечете вниманието към елемент на вашата страница.

За този ефект ни трябва много малко HTML:

Първо, позиционираме демонстрацията и задаваме перспектива за нашата 3D трансформация:

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

След това оформете div, който искаме да анимираме:

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

Тук задаваме фон, след което задаваме препълване да се скрити за да можем да добавим a блясък ефект по-късно. Ние също определихме css променливи , sheenX и блясък .

Тези променливи на блясъка ще помогнат за позиционирането на ефекта на блясък. Ние ги използваме в нашите карти след псевдоелемент:

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(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,0) 60%, rgba(255,255,255,0) 100%); transform: 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; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

Нашата функция взема височината и ширината на прозореца и създава ъгъл по осите X и Y. След това ги задаваме на трансформирам стил на нашия карта . Това дава на картата ъгъл въз основа на мишката!

След това извикваме функция, за да зададем позицията на псевдоелемента:

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; 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. Голямото разкритие

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

Ефектите от разкриването на анимирано съдържание изглеждат доста популярни в момента и ако се използват правилно, те могат да уловят фокуса на потребителя и да привлекат вашата аудитория. Виждали сте това и преди: блок цвят расте от едната или другата страна хоризонтално или вертикално и след това се оттегля към противоположната страна, този път разкривайки някакъв текст или изображение отдолу. Това е концепция, която може да изглежда сложна, но наистина разчита само на няколко неща.

Първо ще настроим позиционирането на елементите ( изтеглете пълния код тук ) - дефинирайте го като относително (в този случай само статичните ще се провалят). В текстовите случаи е най-добре да разрешите автоматична височина и ширина, въпреки че малко подложка не боли. Също така ще дефинираме начало на преобразуване, в случай на родителския елемент искаме да използваме началната позиция. Тъй като първоначално искаме елемента да бъде скрит, ще използваме трансформация на мащаба по подходящата ос, за да го свием.

След това псевдоелемент, който да маскира родителя ни, задавайки началото на преобразуване на противоположната опция. И накрая, нанижете заедно анимациите, като използвате функциите за синхронизиране или закъснения, за да компенсирате всяка.

Имайте предвид, че сме компенсирали анимациите на родител и псевдоелемент със закъснение, като казваме на полето, което скрива нашия текст, да го разкрие само след като самият елемент е напълно мащабиран. Вижте Codepen по-долу.

03. Залитане нататък

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

След като започнете да натрупвате прилична библиотека от различни облекчаващи фрагменти, е време да разгледате други начини за подобряване на дълбочината на вашите анимации и един от най-добрите начини е да компенсирате вашите анимирани елементи.

Твърде често се среща, че задействането на JavaScript е настроено да инициира куп анимации въз основа на позицията на превъртане, само за да намери всички елементи, които се движат ефективно в тандем. За щастие самият CSS предоставя просто свойство, което може да направи (или прекъсне) вашето анимирано изживяване: забавяне на анимацията .

Да кажем, например, че имаме мрежа от изображения, които искаме да анимираме в рамката, когато потребителят превърта. Има няколко начина, по които можем да задействаме това, най-вероятно добавяме класове към елементите, когато влизат в прозореца за гледане. Това обаче може да бъде доста тежко за браузъра и може да бъде избегнато чрез просто добавяне на един клас към елемент на контейнер и дефиниране на забавяния на анимацията на дъщерни елементи.

Това е особено добър случай за използване на препроцесори като SCSS или LESS, които ни позволяват да използваме @за цикъл за итерация през всеки елемент.

#parent{ .child{ animation: animationName 1.5s ease-in-out 1 forwards; @for $i from 1 through 20{ &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s; } } } }

Тук ще видите, че със SCSS можем да преглеждаме всеки : n-ти от типа селектор, след това приложете забавяне на анимацията въз основа на числовата стойност на всеки дъщерен елемент. В този случай ще забележите, че разделяме времето си, за да намалим всяко увеличение до части от секундата. Докато компенсирането на вашите анимирани елементи може да придаде емоция на анимацията ви, твърде голямото забавяне може да го накара да се почувства разединен. Вижте този CodePen по-долу.

04. Присвиване

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

SVG филтрите осигуряват чудесен начин за постигане на естествено, нарисувано от ръка усещане и избягване на някои от плоските усещания за рендиране само на CSS. Анимирането им може допълнително да засили ефекта.

Пример: Squigglevision. Да, това не е технически термин, познат на повечето аниматори, но със сигурност сте го виждали да се използва в карикатурите. Идеята е, че ръбовете на тези анимирани елементи са не само донякъде назъбени и грубо изсечени, но тези груби ръбове бързо се променят, кадър по кадър, карайки ги да се чувстват сякаш са изтръгнати от страниците на скицник и доведени до живот.

За да постигнем този ефект, можем да включим SVG на нашата страница с множество филтри и леки вариации в нивата на турбулентност за всеки. След това ще настроим нашата анимационна хронология, като извикаме всеки филтър в собствения си ключов кадър. Важно е да играете с времевите продължителности, тъй като очакваме анимацията да се почувства „скачаща“, но не искаме да е толкова бавна, че да се чувства разединена или толкова бърза, че да се чувства луда.

За тази цел е важно да се отбележи, че CSS няма способността плавно да преминава между SVG филтри, тъй като няма начин за достъп до свойства като турбулентност и мащаб, така че тези видове анимации винаги трябва да се очакват.

05. Тумблиращи букви

CSS анимация: падащи букви

Играта на годината на Google включва закачлива CSS анимация на началната страница, като заглавните думи се преобръщат и блъскат една в друга. Ето как беше направено.

Първата стъпка е да дефинирате документа на уеб страницата с HTML. Състои се от HTML контейнер за документи, който съхранява глава и тяло. Докато секцията head се използва за зареждане на външни CSS и JavaScript ресурси, тялото се използва за съхраняване на съдържанието на страницата.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Съдържанието на страницата се състои от три етикета за заглавие h1, които ще показват различните вариации на анимационния ефект. Въпреки че всеки текст може да бъде вмъкнат в тези тагове, тяхната анимация се определя от имената в атрибута на класа. Настройките за презентация и анимация за тези имена на класове ще бъдат дефинирани в CSS по-късно.

След това създайте нов файл, наречен „ code.js '. Искаме да намерим всички елементи на страницата с Анимирани клас и създайте масив списък, представляващ всяка дума от вътрешния текст. Първоначалното забавяне на анимацията също е дефинирано в тази стъпка. Съдържанието на страницата не е достъпно, докато страницата не се зареди напълно, така че този код се поставя вътре в прозореца натоварване слушател на събития.

Съдържанието на думите на елементите на анимацията трябва да се съдържа в a обхват елемент. За целта съществуващото HTML съдържание се нулира на празно, след което се използва цикъл, за да направи думата в идентифицирания списък с „думи“ елемент на span. Освен това, animationDelay прилага се стил - изчислява се спрямо първоначалното закъснение (посочено по-долу) и позицията на индекса на думата.



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

Създайте нов файл, наречен стилове.css . Сега ще зададем правилата за презентация, които ще бъдат част от всеки елемент от дума в анимацията, контролиран от техния таг span. Показването като блок, комбинирано с центрирано подравняване на текста, ще доведе до появата на всяка дума на отделен ред, хоризонтално подравнен към средата на контейнера. Относителното позициониране ще се използва за анимиране по отношение на неговото текстов поток позиция.

.animate span{ display: block; position: relative; text-align: center; }

Анимационните елементи, които имат класа назад и напред, имат специфична анимация, приложена към тях. Тази стъпка дефинира анимацията, която да се прилага за елементи на span, чийто родителски контейнер има и Анимирани и наопаки или напред клас.

Обърнете внимание как няма интервал между Анимирани и наопаки препратка към клас, което означава, че родителският елемент трябва да има и двете.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

Смесената анимация се дефинира, като се използват същите настройки, използвани за анимациите напред и назад. Вместо да прилага анимациите към всяко дете на родителя, n-то дете селектор се използва за прилагане на променливи настройки за анимация. Анимацията назад се прилага към всеки дори -брой дете, докато анимацията напред се прилага към всеки странно -брой дете.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

Анимациите, които току-що създадохме, са направени с начална буква ' от „начална позиция, без регулиране на вертикално положение или въртене. ' да се 'position е крайното състояние на анимацията, което задава елементите с коригирано вертикално положение и състояние на въртене. За двете анимации се използват малко по-различни настройки за край, за да се избегне четенето на текста поради припокриване в смесени анимации.

@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. Флип книга

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

При анимация с CSS понякога е необходим мъртъв прост подход. И има малко по-прости методи за анимация от флип книгата. Използвайки стъпки () като нашата функция за синхронизация, ние сме в състояние да възпроизведем този ефект. Въпреки че това може да звучи разкъсано и директно да противоречи на нашата мисия да поддържаме плавност, с правилната крачка може да се почувства също толкова безпроблемно органично.

И така, как работи? Ние дефинираме нашата функция за облекчаване на анимацията само с няколко допълнителни параметъра - казвайки на нашата анимация колко стъпки са необходими и в кой момент по време на първата стъпка бихме искали да започнем (начало, край) - изглежда малко по този начин, например стъпки (10, старт) .

В рамките на нашите ключови кадри вече можем да определим крайна точка на нашата анимация: за този пример нека приемем, че нашата анимация е с дължина 10 секунди и използваме 10 стъпки. В този случай всяка стъпка ще бъде с продължителност една секунда, като веднага ще премине към следващия кадър от една секунда без преход между тях.

Отново това изглежда лети пред плавността, но ето къде стъпаловидните анимации наистина могат да блестят. Можем постепенно да итерираме през спрайт лист и да анимираме кадър по кадър точно като флип книга. Като дефинираме кадри с еднакъв размер, но ги компилираме върху едно хоризонтално (или вертикално) изображение, можем да зададем това изображение като фон на елемент и да определим пиксел или процентна позиция на фона като крайна точка на нашата анимация, позволявайки една стъпка за всеки кадър. След това листът за спрайт ще измести и запълни елемента кадър по кадър със свежо фоново изображение въз основа на неговата позиция.

Нека да разгледаме един пример. В този случай някои набори от анимирани крака са добавени към някои текстови символи. Първо ще определим името на анимацията, продължителността, броя на стъпките, началната позиция и броя на итерациите:

animation:runner 0.75s steps(32, end) infinite;

Отново имайте предвид, че продължителността е относително бърза при по-малко от една пълна секунда за общо 32 кадъра. След това ще дефинираме нашите ключови кадри:

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:- 1280px 50%; }}

Имайте предвид, че вертикалното позициониране на изображението е последователно през цялото време, което ни казва, че спрайтовете са хоризонтално опънати по изображението, което е 1280px в обща ширина. Тъй като сме определили общо 32 кадъра за това изображение, можем да заключим, че всеки кадър трябва да бъде с ширина 40 пиксела. Вижте този Codepen по-долу.

Важно е да се отбележи, че големият спрайт лист може потенциално да се отрази сериозно на производителността, така че не забравяйте да оразмерите и компресирате изображения. С добре изработен спрайт лист и подходяща продължителност на анимацията вече имате плавна анимация, способна да предаде сложни движения.

07. Духащи мехурчета

CSS анимацията на балончета, която се предлага на 7UP, е прекрасен пример за пренасяне на тема на марката в дизайна на уебсайта. Анимацията се състои от няколко елемента: SVG ‘чертеж’ на мехурчетата и след това две анимации, приложени към всеки балон.

Първата анимация променя непрозрачността на балончето и го премества вертикално в полето за изглед; втората създава колеблив ефект за допълнителен реализъм. Отместванията се обработват чрез насочване на всеки балон и прилагане на различна продължителност и забавяне на анимацията.

За да създадем нашите мехурчета, ще ги използваме SVG . В нашия SVG ние създаваме два слоя мехурчета: един за по-големите мехурчета и един за по-малките мехурчета. Вътре в SVG позиционираме всички наши мехурчета в долната част на полето за изглед.

... ...

За да приложим две отделни анимации към нашите SVG, и двете използващи свойството за преобразуване, трябва да приложим анимациите към отделни елементи. The елементът в SVG може да се използва подобно на div в HTML; трябва да обвием всеки от нашите мехурчета (които вече са в група) в групов маркер.

CSS разполага с мощен анимационен механизъм и наистина опростен код за създаване на сложни анимации. Ще започнем с преместване на мехурчетата нагоре по екрана и промяна на тяхната непрозрачност, за да ги избледняваме навън и навън в началото и в края на анимацията.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); } }

За да създадем ефект на клатушкане, просто трябва да преместим (или да преведем) балончето наляво и надясно, само с точното количество - твърде много ще доведе до това, че анимацията да изглежда прекалено развълнувана и прекъсната, докато твърде малко ще остане предимно незабелязано. Експериментирането е ключово при работата с анимация.

@keyframes wobble { 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 infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. Скролираща мишка

Една фина превъртаща се анимация на мишката може да даде насока на потребителя, когато за пръв път се качи на уебсайт. Въпреки че това може да се постигне с помощта на HTML елементи и свойства, ще използваме SVG, тъй като това е по-подходящо за рисуване.

Вътре в нашия SVG се нуждаем от правоъгълник със заоблени ъгли и кръг за елемента, който ще анимираме, като използваме SVG, можем да мащабираме иконата до всеки размер, от който се нуждаем.

Сега създадохме нашия SVG, трябва да приложим няколко прости стила, за да контролираме размера и позицията на иконата в нашия контейнер. Опаковахме връзка около SVG на мишката и я позиционирахме в долната част на екрана.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } .mouse { max-width: 2.5rem; width: 100%; height: auto; }

След това ще създадем нашата анимация. На 0 и 20 процента от пътя през нашата анимация, ние искаме да зададем състоянието на нашия елемент, тъй като той започва. Като го настроите на 20% от пътя, той ще остане неподвижен за част от времето, когато се повтаря безкрайно.

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); } }

Трябва да добавим началната точка на непрозрачността и след това да преобразуваме както позицията Y, така и вертикалната скала на 100%, края на нашата анимация. Последното нещо, което трябва да направим, е да пуснем непрозрачността, за да изчезна кръга ни.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; } }

Накрая прилагаме анимацията към кръга, заедно със свойството ‘transform-origin’ и ще се промени свойство да позволява хардуерно ускорение. Свойствата на анимацията са доста обясними. The кубично-безие функцията за синхронизация се използва за първо издърпване на кръга назад, преди да го пуснете до дъното на нашата форма на мишката; това добавя игриво усещане към анимацията.

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. Анимирано писане

CSS анимации: писане

Щракнете, за да видите анимацията в действие

Уебсайтът Garden Eight използва обща техника за анимация, при която изглежда, че текстът е изписан. За да постигнем ефекта, се обръщаме към SVG. Като начало ще създадем SVG. Тук има два подхода: преобразувайте текста в пътеки, за да ги анимирате или използвайте SVG текст. И двата подхода имат своите плюсове и минуси.

Започнете със създаването на нашата анимация на ключови кадри. Единствената функция, от която се нуждаем, е да сменим удар-дашофсет . Сега създадохме нашата анимация, трябва да приложим стойностите, от които искаме да анимираме. Зададохме инсулт-дашарей , което ще създаде пропуски в удара. Искаме да зададем хода си като достатъчно голяма стойност, за да покрие целия елемент, като накрая компенсира тирето с дължината на хода.

Магията се случва, когато прилагаме нашата анимация. Като анимираме отместването, ние показваме удара - създаваме ефект на рисуване. Искаме елементите да рисуват един по един, с известно припокриване между края на рисуването на един елемент и започването на следващия. За да постигнем това се обръщаме към Sass / SCSS и n-ти тип да се забави всяка буква с половината от дължината на анимацията, умножена по позицията на тази конкретна буква.

10. Летящи птици

Започваме с напълно прави векторни линии, изчертавайки всеки кадър от нашата анимация, изобразявайки птицата в различно състояние на полет. След това манипулираме векторните точки и закръгляме линиите и ръбовете. Накрая поставяме всяка рамка в еднакво голяма кутия и ги поставяме една до друга. Експортирайте файла като SVG.

Настройката на HTML е наистина проста. Просто трябва да обвием всяка птица в контейнер, за да приложим множество анимации - едната, за да накара птицата да лети, а другата, за да я премести през екрана.

Ние прилагаме нашата птица SVG като фон за нашата птица div и избираме размера, който искаме да бъде всеки кадър. Използваме ширината, за да изчислим грубо новата позиция на фона. SVG има 10 клетки, така че умножаваме ширината си по 10 и след това леко променяме числото, докато изглежда правилно.

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

CSS анимацията има няколко трика, за които може да не сте наясно. Можем да използваме функция за анимация-синхронизация за да покажете изображението на стъпки - подобно на прелистването на страници в бележник, за да намеквате за анимация.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

Сега създадохме нашия цикъл на летене, нашата птица в момента пляска с криле, но никъде не отива. За да я преместим през екрана, ние създаваме друга анимация на ключови кадри. Тази анимация ще премести птицата по екрана хоризонтално, като същевременно променя вертикалната позиция и скалата, за да позволи на птицата да се извива по-реалистично.

След като създадем нашите анимации, просто трябва да ги приложим. Можем да създадем множество копия на нашата птица и да приложим различни анимационни времена и закъснения.

.bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; }

11. Пресичам моя хамбургер

Тази анимация се използва в цялата мрежа, превръщайки три линии в икона на кръст или затваряне. До съвсем наскоро по-голямата част от внедряванията бяха постигнати с помощта на HTML елементи, но всъщност SVG е много по-подходящ за този вид анимация - вече няма нужда да раздувате кодовете на бутоните си с множество интервали.

Поради анимационната природа и SVG и нейния навигационен DOM, кодът за изпълнение на анимацията или прехода се променя много малко - техниката е същата.

Започваме със създаването на четири елемента, независимо дали се простира вътре в div или пътища вътре в SVG. Ако използваме обхвати, трябва да използваме CSS, за да ги позиционираме вътре в div; ако използваме SVG, това вече е подсигурено. Искаме да позиционираме линии 2 и 3 в центъра - една върху друга - докато раздалечаваме линии 1 и 4 равномерно отгоре и отдолу, като не забравяме да центрираме началото на преобразуването.

Ще разчитаме на преход на две свойства: непрозрачност и въртене. На първо място, искаме да изчезнат редове 1 и 4, към които можем да се насочим с помощта на : n-то дете селектор.

.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. Преследване на кръгове

Анимираната икона за зареждане се състои от четири кръга. Кръговете нямат запълване, но имат редуващи се цветове на щриха.

В нашия CSS можем да зададем някои основни свойства на всички наши кръгове и след това да използваме : n-ти от типа селектор, за да приложите различен инсулт-дашарей към всеки кръг.

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

След това трябва да създадем нашата ключова рамка анимация. Нашата анимация е наистина проста: всичко, което трябва да направим, е да завъртим кръга на 360 градуса. Като поставим нашата трансформация на 50% от анимацията, кръгът също ще се завърти обратно в първоначалното си положение.

@keyframes preloader { 50% { transform: rotate(360deg); } }

Със създадената ни анимация сега просто трябва да я приложим към нашите кръгове. Задаваме името на анимацията; продължителност; функция за броене на итерации и синхронизация. „Лесното навлизане“ ще даде на анимацията по-игриво усещане.

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

В момента разполагаме с нашия товарач, но всички елементи се въртят едновременно. За да коригираме това, ще приложим някои закъснения. Ще създадем закъсненията си, като използваме цикъл Sass for.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

Поради закъсненията, нашият кръг сега се анимира на свой ред, създавайки илюзията за преследващите се кръгове. Единственият проблем с това е, че когато страницата се зареди за първи път, кръговете са статични, след това те започват да се движат, един по един. Можем да постигнем същия ефект на компенсиране, но да спрем нежеланата пауза в нашата анимация, като просто зададем закъсненията на отрицателна стойност.

animation-delay: -#{$i * 0.15}s;

Следваща страница: Още примери за CSS анимация за изследване

Текуща страница: CSS уроци за анимация

Следваща страница CSS анимационни ефекти