Начало
Как се работи
Анимационни CSS примери и готов код. Анимиране на интерфейси с помощта на CSS Анимация css примери

Анимационни CSS примери и готов код. Анимиране на интерфейси с помощта на CSS Анимация css примери

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

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

Синтаксис и семантика на анимацията

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

Този пример описва два елемента. Първата е индикаторна лента, която се движи надясно и се увеличава пропорционално по размер. Вторият елемент е картина, която просто се премества надясно.

Не всички рамки са показани тук. Имотът в този случай се реализира безпроблемно. Посетителят на страницата наблюдава плавно движение с увеличаване на обема на линията и движението на изображението. Чрез използване на различни опции за движение вместо типа "леко навътре" можете да контролирате движението. Опцията ease-in-out дава ускорение в началото и спиране в края, но можете да изберете друга опция за движение.

Наслагване и взаимодействие на елементи

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

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

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

Промяната на времето на анимацията също води до нестандартни решения. Използването на свойство на трансформация, като например ротационна функция на елемент, генерира оригинални промени. Пример:

Тук лентата непрекъснато променя външния си вид от непрозрачно състояние в прозрачно. Долната снимка променя само формата.

Анимация на информация

В CSS: текстовата анимация има специално значение. Текстът винаги има значение и присъства на уеб страница с конкретна цел. Но текстът винаги е по-малко информативен от изображение и заема много място.

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

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

В този контекст всеки от горните примери е удобен за представяне текстова информация, но опцията за използване на CSS като 3D анимация е най-практична.

Тук, в „нормално“ състояние, текстът заема малко място. Можете да маркирате основната дума или да посочите значението. Веднага след като мишката удари текстовата област, тя се разширява от CSS 3D анимация до нормално четливо състояние.

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

Опция за потребителска анимация

Забележителните успехи в създаването на висококачествени уеб ресурси все още оставят един странно поставен въпрос извън разглеждането: защо дизайнът на уебсайт е грижа на разработчиците?

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

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

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

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

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

CSS 3D облаци

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

Чисти CSS лога

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

Азбука с CSS анимация

Страхотен и артистичен пример за използване на CSS в азбуката

3D навигация за сайта

Проста, но много стилна навигационна лента за сайта, разбира се, направена само с CSS3. няма изображения или скриптове.

Google Doodle с CSS

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

Плъзгач

Добре направен и качествен слайдер за изображения. Плюс 4 примера в демонстрацията.

Двоен анимиран пръстен

Красив анимиран и многоцветен пръстен с малко CSS код

Размазване в CSS

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

Пълното ръководство за Flexbox

Тази статия е за отзивчиви блокове Flexbox. Говори се изцяло за тези блокове, въпреки че статията е на английски.

Цветно и анимирано меню, използващо CSS3

Красиво падащо меню за уебсайт с икони. Огромен плюс е, че е направен изцяло в CSS.

CSS филтри

Висококачествен материал на английски език, който описва приложението CSS филтрикъм изображенията.

CSS форми

Публикация за CSS формуляри с множество примери

Ленти за напредък в CSS

Урок за това как да създавате стилни ленти за напредъка с помощта на чист CSS и анимация. Можете също така да разгледате примера и да изтеглите източниците.

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

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

Всички съвременни браузъри, с изключение на IE9, поддържат CSS преходи и CSS анимации, които ви позволяват да реализирате анимация с помощта на CSS, без да включвате JavaScript. Анимацията се прилага за всякакви html елементи, както и за псевдоелементи :предиИ :след

Поддръжка на браузър

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Опера: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Браузър за Android: 44, 4.1 -webkit-
Chrome за Android: 44

За да използвате анимация във вашия проект, трябва само да направите две неща:

  1. Създайте самата анимация, като използвате ключовата дума @keyframes
  2. Свържете го с елемента, който трябва да бъде анимиран и задайте необходимите свойства.

правило @keyframes

правило @ключови рамкиви позволява да създавате анимация с помощта на ключови кадри - състояния на обект в определен момент от време.

Ключовите кадри на анимацията се създават с помощта на ключови думи отИ към(еквивалентни на стойностите 0% и 100%) или с помощта на процентни точки, които могат да бъдат зададени колкото желаете. Може и комбиниран ключови думии процентни пунктове.

Ако първоначално ( от, 0%) или окончателен ( към, 100%) рамка, браузърът ще зададе изчислените стойности на анимираните свойства за тях, както биха били, ако анимацията не беше приложена.

Ако два ключови кадъра имат еднакви селектори, следващият ще отмени предишния.

Когато дефинирате анимация непосредствено след свойство @ключови рамкитрябва да бъде последвано от името на тази анимация ( дадено имеслед това трябва да се посочи в свойството за анимация на елемента, който ще бъде анимиран).

@keyframes преместване (от ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

преместване на @keyframes (

от (

50% {

100% {

трансформиране: translateX(0px);

Създадохме анимация, която работи по следния начин:

  1. Начало на анимацията ( отможе да се напише 0%) — позицията на елемента по оста X е 0px;
  2. Средна част на анимацията (50%) - позицията на елемента по оста X е 130px;
  3. Край на анимацията ( къмизползвахме 100%) - връщаме елемента в началото на анимацията, т.е. позицията на елемента по оста X е 0px;

Тук и по-долу, за удобство, написах в примерите няколко реда JavaScript, които последователно ще добавят или премахват клас с анимация върху елемент, така че за да възпроизведете анимацията, просто щракнете върху този елемент.

Ключовите кадри могат да бъдат групирани:

@keyframes преместване (от ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )

преместване на @keyframes (

от (

трансформиране: translateX(0px);

25%, 50% {

трансформиране: translateX(130px);

100% {

трансформиране: translateX(0px);

Можете да зададете няколко анимации на един елемент, техните имена и параметри трябва да бъдат записани в реда на задаване:

елемент ( име на анимация: анимация-1, анимация-2; времетраене на анимация: 2s, 4s; )

елемент (

име на анимация: анимация-1, анимация-2;

времетраене на анимацията : 2s, 4s ;

Свързването на анимация към елемент се извършва с помощта на две команди - име на анимацияИ анимация-продължителност.

Име на анимацията

Собственост име на анимацияуказва името на анимацията. Препоръчително е да използвате име, което отразява същността на анимацията, като можете да използвате една или няколко думи, свързани помежду си с интервал - или долна черта _.

име на анимация: движение;

Времева функция

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

Можете обаче сами да създадете такива функции. Специална функция кубичен безие (P1x, P1y, P2x, P2y); взема четири аргумента и изгражда крива на разпределение на стойността въз основа на тях по време на процеса на анимация. Можете да се упражнявате да създавате свои собствени функции и да видите как работят на този сайт.

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

  • лекота- функция по подразбиране, анимацията започва бавно, ускорява се бързо и се забавя в края. Съответства на cubic-bezier(0.25,0.1,0.25,1).
  • линеен— анимацията протича равномерно през цялото време, без колебания в скоростта; съответства на cubic-bezier(0,0,1,1).
  • лекота на влизане— анимацията започва бавно и след това плавно се ускорява в края; съответства на cubic-bezier(0.42,0,1,1).
  • облекчаване— анимацията започва бързо и плавно се забавя в края; съответства на cubic-bezier(0,0,0.58,1).
  • лекота на влизане и излизане— анимацията започва бавно и завършва бавно; съответства на cubic-bezier(0.42,0,0.58,1).
  • кубичен безие(x1, y1, x2, y2)- виж по-горе.
  • наследяват— наследява това свойство от родителския елемент.

Визуално сравнение

Анимация със закъснение

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

елемент ( име на анимация: анимация-1; продължителност на анимация: 2 секунди; забавяне на анимацията: 10 секунди; // ще минат 10 секунди, преди тази анимация да започне)

Повтаряне на анимацията

Собственост animation-iteration-countви позволява да стартирате анимацията няколко пъти. Не се предава по наследство. Задайте стойността на произволна положителна стойност 1, 2, 3 … и т.н. или безкраенза безкрайно повторение. Смисъл 0 или което и да е отрицателно число премахва възпроизвеждането на анимацията.

Наскоро го видяхме преходи- това е просто начин анимациисвойства на стила от оригиналенкъм окончателенсъстояние.

Така че преходите в CSS са специфичентип анимация, където:

  • има само две състояния: начало и край;
  • анимацията не се зацикля;
  • междинните състояния се контролират само от времева функция.

Но какво, ако искате:

  • има контрол върху междинендържави?
  • цикъланимация?
  • правете различни видове анимации за единелемент?
  • анимирайте конкретно свойство само върху половинатаначини?
  • подражавам различни времеви функцииза различни имоти?

Анимацията в CSS ви позволява да правите всичко това и много повече.

Анимацията е като мини филм, където вие, като режисьор, давате инструкции (стилови правила) на вашите актьори ( HTML елементи) за различни сцени (ключови кадри).

Свойства на анимацията

Подобно на conversion, свойството animation е съкратеноза няколко други:

  • име-на-анимация : име на анимация;
  • animation-duration : колко време трае анимацията;
  • animation-timing-function: как се изчисляват междинните състояния;
  • animation-delay : анимацията започва след известно време;
  • animation-iteration-count : колко пъти трябва да се изпълни анимацията;
  • animation-direction : трябва ли движението да върви в обратна посока или не;
  • animation-fill-mode : какви стилове се прилагат преди началото на анимацията и след края й.

Бърз пример

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

@keyframes bouncing( 0% (долу: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1);

Първо трябва да напишете действителна подскачаща анимация с помощта на @keyframes и да я наречете.

използвах съкратено animation property и включва всички възможни опции:

  • име-на-анимация: подскачане (същото като името на ключовия кадър)
  • продължителност на анимацията: 0.5s (половин секунда)
  • функция за време на анимация: кубичен-безие(0.1,0.25,0.1,1)
  • забавяне на анимацията: 0s (без забавяне)
  • animation-iteration-count: безкрайно (възпроизвежда се безкрайно)
  • animation-direction: алтернативен (върви напред и назад)
  • animation-fill-mode: и двете

@ключови рамки

Преди да приложите анимация към HTML елементи, трябва напишете анимация с помощта на ключови кадри. Като цяло ключовите кадри са всеки междинна стъпкав анимацията. Те се определят в проценти:

  • 0% - първа стъпка на анимация;
  • 50% е половината стъпка в анимацията;
  • 100% е последната стъпка.

Можете също да използвате ключовите думи от и до вместо съответно 0% и 100%.

Можете да дефинирате толкова ключови кадри, колкото искате, като 33%, 4% или дори 29,86%. На практика ще напишете само някои от тях.

Всеки ключов кадър е CSS правило, това означава, че можете да пишете CSS свойствакакто обикновено.

За да дефинирате анимация, просто напишете ключовата дума @keyframes с нея име:

@keyframes около ( 0% ( ляво: 0; горе: 0; ) 25% ( ляво: 240px; горе: 0; ) 50% ( ляво: 240px; горе: 140px; ) 75% ( ляво: 0; горе: 140px ; ) 100% ( отляво: 0; отгоре: 0; ) ) p ( анимация: около 4s линейно безкрайно; )

Обърнете внимание, че началните 0% и крайните 100% съдържат същите правила CSS. Това гарантира, че анимацията се повтаря перфектно. Тъй като броячът на итерациите е настроен на безкраен, анимацията ще премине от 0% до 100% и след това веднага назаддо 0% и така до безкрай.

име на анимация

Имеизползва се поне анимация два пъти:

  • при писанеанимации с помощта на @keframes;
  • при използванеанимация с помощта на свойството animation-name (или съкратеното свойство на анимацията).
@keyframes каквото и да е ( /* ... */ ) .селектор ( име на анимация: каквото и да е; )

Подобно на имената на CSS класове, името на анимацията може да включва само:

  • букви (a-z);
  • числа (0-9);
  • долна черта (_);
  • тире (-).

Името не може да започва с цифра или две тирета.

анимация-продължителност

Подобно на продължителността на прехода, продължителността на анимацията може да бъде зададена на секунди(1s) или милисекунди(200 ms).

Селектор (продължителност на анимацията: 0,5 s;)

Стойността по подразбиране е 0s, което означава, че изобщо няма анимация.

функция за време на анимация

Подобно на функциите за синхронизиране на прехода, функциите за синхронизиране на анимация могат да използват ключови думи, като linear , ease-out или могат да бъдат дефинирани с произволни такива Криви на Безие.

Селектор (функция за време на анимация: лесно влизане-излизане;)

Стойност по подразбиране: лекота.

Тъй като анимацията в CSS използва ключови кадри, можете да зададете линеенфункция на времето и симулираспецифична крива на Безие чрез дефиниране много много специфичниключови кадри. Вижте Bounce.js за разширена анимация.

анимация-закъснение

Както при забавянето на прехода, забавянето на анимацията може да бъде зададено на секунди(1s) или милисекунди(200 ms).

По подразбиране е 0s, което означава никакво забавяне.

Полезно, когато включвате множество анимации в a серия.

A, .b, .c ( анимация: подскачане 1 s; ) .b ( забавяне на анимацията: 0,25 s; ) .c ( забавяне на анимацията: 0,5 s; )

animation-iteration-count

По подразбиране се възпроизвежда само анимацията веднъж(стойност 1). Можете да зададете три типа стойности:

  • цели числа, като 2 или 3;
  • дробни числа като 0,5, които ще възпроизведат само половината от анимацията;
  • ключовата дума infinite, която ще повтаря анимацията безкрайно.
.selector (animation-iteration-count: infinite;)

анимация-режисура

Свойството animation-direction указва дали в какъв редключови кадри се четат.

  • нормално : започва от 0%, завършва на 100%, започва отново от 0%.
  • обратен : започва от 100%, завършва на 0%, започва отново от 100%.
  • алтернативен: започва от 0%, отива до 100%, връща се до 0%.
  • alternate-reverse : започва от 100%, отива до 0%, връща се до 100%.

Това е по-лесно да си представим, ако броят на итерациите на анимацията е настроен на безкраен.

animation-fill-mode

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

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

animation-fill-mode ви позволява да кажете на браузъра дали анимационни стилове Също такатрябва да се приложи отвъд анимацията.

Нека си представим бутон, което е:

  • червенопо подразбиране;
  • става синьов началото на анимацията;
  • и в крайна сметка зеленокогато анимацията приключи.

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

Има три ключови предимства на CSS анимациите пред традиционните техники за анимация, управлявани от скриптове:

  1. Те са лесни за използване за прости анимации; можете да ги създадете, без дори да знаете JavaScript.
  2. Анимациите вървят добре, дори при умерено натоварване на системата. Простите анимации често могат да се представят лошо в JavaScript (освен ако не са добре направени). Механизмът за изобразяване може да използва прескачане на кадри и други техники, за да поддържа производителността възможно най-плавна.
  3. Оставянето на браузъра да контролира последователността на анимациите позволява на браузъра да оптимизира производителността и ефективността, например като намали честотата на актуализиране на анимациите, изпълнявани в раздели, които в момента не са видими.

Конфигуриране на анимацията

За да създадете CSS анимационна последователност, стилизирате елемента, който искате да анимирате, със свойството за анимация или неговите подсвойства. Това ви позволява да конфигурирате времето, продължителността и други подробности за това как трябва да напредва последователността на анимацията. Това прави неконфигурирайте действителния външен вид на анимацията, което се прави с помощта на правилото @keyframes at, както е описано по-долу.

animation-name Указва името на @keyframes at-правило, описващо ключовите кадри на анимацията.

animation-duration Конфигурира продължителността на времето, което трябва да отнеме една анимация, за да завърши един цикъл.

animation-timing-function Конфигурира времето на анимацията; т.е. как анимацията преминава през ключови кадри, чрез установяване на криви на ускорение.

animation-delay Конфигурира забавянето между момента на зареждане на елемента и началото на последователността на анимацията. animation-iteration-count Конфигурира броя на повторенията на анимацията; можете да укажете безкрайно, за да повтаряте анимацията безкрайно.

animation-direction Конфигурира дали анимацията трябва да променя посоката при всяко преминаване през последователността или да се нулира до началната точка и да се повтаря.

animation-fill-mode Конфигурира какви стойности се прилагат от анимацията преди и след нейното изпълнение.

animation-play-state Позволява ви да поставите на пауза и възобновите последователността на анимацията.Определяне на последователността на анимацията с помощта на ключови кадри

След като конфигурирате времето на анимацията, трябва да дефинирате външния вид на анимацията. Това се прави чрез установяване на два или повече ключови кадъра с помощта на правилото @keyframes at. Всеки ключов кадър описва как анимираният елемент трябва да се визуализира в даден момент по време на последователността на анимацията.

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

@keyframes slidein (от ( margin-left: 100%; width: 300%; ) to ( margin-left: 0%; width: 100%; ) )

Гъсеницата и Алиса се гледаха известно време мълчаливо: най-накрая Гъсеницата извади наргилето от устата си и се обърна към нея с вял, сънлив глас.

Използване на стенография на анимация

Стенограмата на анимацията е полезна за спестяване на място. Като пример, правилото, което използвахме в тази статия:

P (animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; )

Може да бъде заменен от

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

Задаване на множество стойности на свойства на анимация

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

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

Име на анимация: fadeInOut, moveLeft300px, отскачане; анимация-продължителност: 3s; брой итерации на анимация: 1;

В този втори пример имаме три стойности, зададени и за трите свойства. В този случай всяка анимация се изпълнява със съответните стойности в една и съща позиция на всяко свойство, така че например fadeInOut има продължителност от 2,5 s и брой итерации от 2 и т.н.

Име на анимация: fadeInOut, moveLeft300px, отскачане; времетраене на анимацията: 2.5s, 5s, 1s; брой итерации на анимация: 2, 1, 5;

В този трети случай има посочени три анимации, но се броят само две продължителности и итерации. В такива случаи, когато има не е достатъчностойности, за да дадете отделна стойност на всяка анимация, стойностите се движат от началото до края. Така например fadeInOut получава продължителност от 2,5 s, а moveLeft300px получава продължителност от 5 s. Вече стигнахме до края на наличните стойности за продължителност, така че започваме отново от началото - следователно отскачането получава продължителност от 2,5 секунди. Броят на итерациите (и всички други стойности на свойствата, които посочите) ще бъдат присвоени по същия начин.

Име на анимация: fadeInOut, moveLeft300px, отскачане; времетраене на анимацията: 2.5s, 5s; брой итерации на анимация: 2, 1;

Използване на анимационни събития

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

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

Добавяне на CSS

Започваме със създаването на CSS за анимацията. Тази анимация ще продължи 3 секунди, ще се нарича „slidein“, ще се повтори 3 пъти и ще променя посоката всеки път. В @keyframes ширината и лявото поле се манипулират, за да накарат елемента да се плъзга по екрана.

Slidein ( animation-duration: 3s; animation-name: slidein; animation-iteration-count: 3; animation-direction: alternate; ) @keyframes slidein ( from ( margin-left:100%; width:300% ) to ( margin -ляво:0%; ширина:100%;

Добавяне на слушателите на анимационни събития

Ще използваме JavaScript код, за да слушаме и трите възможни анимационни събития. Този код конфигурира нашите слушатели на събития; наричаме го, когато документът се зареди за първи път, за да настроим нещата.

Var element = document.getElementById("watchme"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", слушател, невярно); element.addEventListener("animationiteration", listener, false); element.className = "slidein";

Това е доста стандартен код; можете да получите подробности за това как работи в документацията за eventTarget.addEventListener(). Последното нещо, което прави този код, е да зададе класа на елемента, който ще анимираме, на „slidein“; правим това, за да стартираме анимацията.

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

Получаване на събитията

Събитията се доставят на функцията listener(), която е показана по-долу.

Функция слушател(събитие) ( var l = document.createElement("li"); switch(event.type) ( case "animationstart": l.innerHTML = "Started: изминалото време е " + event.elapsedTime; break; case " animationend": l.innerHTML = "Приключи: изминалото време е " + event.elapsedTime; прекъсване; case "animationiteration": l.innerHTML = "Нов цикъл започна в момента " + event.elapsedTime; прекъсване; ) document.getElementById(" изход").appendChild(l); )

Този код също е много прост. Той просто преглежда event.type, за да определи какъв тип анимационно събитие е настъпило, след което добавя подходяща бележка към елемента, който представлява неподреден списък от елементи, обикновено изобразен като списък с водещи символи.">

    (неподреден списък), който използваме, за да регистрираме тези събития.

    Резултатът, когато всичко е казано и направено, изглежда нещо подобно:

    • Започнато: изминалото време е 0
    • Нов цикъл започна в момент 3.01200008392334
    • Нов цикъл стартира в момент 6.00600004196167
    • Приключи: изминалото време е 9.234000205993652

    Обърнете внимание, че времената са много близки, но не точно, до очакваните предвид времето, установено при конфигурирането на анимацията. Имайте предвид също, че след последната итерация на анимацията, събитието animationiteration не се изпраща; вместо това се изпраща събитието animationend.

    HTML

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

    Гледай ме как се движа

    Този пример показва как да използвате CSS анимации, за да направите H1елементи се движат по страницата.

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

    И ето изхода на живо.

    Забележка: Презаредете страницата, за да видите анимацията, или щракнете върху бутона CodePen, за да видите анимацията в средата на CodePen.

    Как се работи

Може също да харесате