Css анимация - анимация собственост, SEO фар

CSS анимация - анимация имот

Днес ние ще създаде анимация с помощта на друг език за програмиране, наречен CSS.

За начинаещи, бих казал, че CSS език (английски Cascading Style Sheets, преведени Cascading Style Sheets.) - език за описание на външния вид на уеб страници. Какво означава това? А това означава, че с помощта на формиране на външния вид на всеки сайт, на езика.

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

CSS потенциал е наистина безгранична и с освобождаването на CSS3 (CSS трето поколение) възможността да се движат обекти в реално време, с най-различни начини.

В тази статия ще разгледаме уникалното свойство да CSS3 анимация и обикновено @keyframes. Но всичко нека в ред. Да вървим!

CSS-базирани анимации

CSS анимация градивни елементи са: анимация собственост и правилата @keyframes.

@keyframes - уникален правило CSS3, позволява да се определят последователните рамките на анимация.

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

Така че, отново махало:

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

Сега нека видим как анимация собственост и правилата на @keyframes

анимация собственост може да бъде разделена на още няколко свойства:

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

Малко по-късно ще разгледаме всеки един имот в подробности, но за сега само ще ви запознае с основните средства.

правило @keyframes

Както споменах по-горе, правилото определя @keyframes последователни кадри на анимацията. Време е да се обясни как правилото.

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

Но е възможно и по друг начин:

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

Семеен имоти анимация

За да се улесни усвояването на учебния материал, след описанието на всеки имот, ще докарам ярък пример.

Така че, да вземе текста, например "Beguschaa линия" и сложи това в HTML класа за него:

Освен това, в style.css файла за генерирания класа предписва следните свойства на анимация:

По-долу сме напиши правило на анимацията:

Преди да ви покажа какво се е случило в края на краищата, да се анализират подробно това, което се нареди.

анимация име: тест; - попитахме името на теста за анимация;
анимация продължителност: 4s; - попитахме анимацията 4 секунди;
анимация, повторение-брой: безкраен; - Интересна особеност, с която можете да зададете броя на повторенията на анимация, (безкрайната - ". Безкрайността" в превод от английски език). Също така, числовата стойност на повторенията може да се настрои в този комплекс, например: 1 - едно повторение (по подразбиране), 2 - две повторения и т.н.

тест @keyframes - тук нарекохме тест обикновено сътрудник анимация с неговите свойства @keyframes анимация.
от - да първоначална позиция в три реда пиксел от левия страница ръба.
за - целевата позиция в реда и шестстотин пиксели от левия ръб на страницата.

В резултат на това, ние получаваме следния ефект:

Леко повишаване на текста и да добавите малко цвят:

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

Имота анимация-време-функция

анимация-време-функция: лекота; - приплъзване (по подразбиране) В горния пример ние не използваме имот анимация-тайминг-функция, но в действителност това е работил и стойността е имал, просто лекота, и поради това не е равномерна скорост.

Имоти анимация-тайминг-функция може да отнеме повече от една стойност, проверете всеки един от тях.

анимация-време-функция: лекота на изчакване; - по-гладка плъзгане;

анимация-време-функция: линейна; - равномерна скорост;

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

анимация-време-функция: лекота на; - ускорение в началото на анимацията;

анимация-време-функция: кубичен-Bezier (.chislo брой брой брой). - С помощта на тази стойност, можете да укажете на ефекта на многопосочно движение на анимацията:

кубичен-Bezier (0.22, 1.47. 26, -0.49)

анимация-време-функция: стъпка започне; - това е стойността Искам да направя подробностите и ще ви покаже друго правило @keyframes:

Както можете да видите по правило могат да се @keyframes стойността в%, което е много удобно, когато създавате анимации. Така че, с дадените стойности на стъпалата може да се играе с помощта на стъпка старт.

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

анимация-време-функция: стъпка край; - ако стъпка края минава последната стъпка на анимацията.

анимация-времето функции: стъпки (брой); - действия за опростяване стъпка по стъпка стойност анимация. Конзолите могат просто да се регистрират броя на стъпките и @keyframes правило определя първата и последната стъпка.

При прилагането на стойностите на стъпки последната стъпка липсва.

С стойности над собственост анимация-време-функция може да бъде доста фино коригира всяка анимация. Продължавай.

Имоти анимация посока

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

анимация посока: нормално; - обща движение ред от ляво на дясно.

анимация посока: обратно; - движение анимация от края към началото.

анимация посока: алтернативен; - първата анимация се играе в нормален режим, а след това в обратната посока.

анимация посока: заместник-обратната; - Анимацията започва с края на краищата, става въпрос за началото, а след това се премести в обратната посока.

В бъдеще статия ще дам различни примери на CSS анимации, не само тичане линия, стига следните имоти.

Имоти анимация забавяне

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

анимация забавяне: 0s; - стойността по подразбиране.

анимация забавяне: 5s; - А сега да попитам закъснение от 5 секунди.

анимация забавяне: -5s; - Можете да посочите и отрицателна стойност забавяне на възпроизвеждането.

Има и друга интересна функция.

анимация попълване режим на имота

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

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

В примера задам два повторения и да забави анимация в 5 секунди, но да видим как работи, този имот ще трябва да презаредите страницата.

анимация попълване режим: няма; - имотът се прилага за първи активен рамката.

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

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

анимация попълване режим: и двете; Това е вид на комплексно решение. Анимация ще се прилагат стойностите на свойствата на първия ключов кадър в започне възпроизвеждането и запаметява стойностите на собственост на последния ключов кадър след завършване на анимацията.

Остава последния собственост на колекцията анимация.

Имоти анимация игра състояние

Имотът може да отнеме само две стойности:

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

анимация игра състояние: пауза; - стоп анимация в първата стъпка.

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

Кратко писане на свойствата на анимацията

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

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

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

Разбира се, за всяко име, анимацията трябва да бъде написана на отделни правила @keyframes.

съвместимост различни браузъри

Предполагам, че първо трябва да се обясни понятието "съвместимост различни браузъри" себе си.

Съвет! съвместимост различни браузъри - правилното показване на обекта във всички популярни браузъри.

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

-WebKit-анимация: стойност; - Браузър: Chrome, Safari, IOS;
-Moz-анимация: стойност; - за браузъра Firefox;
-о-анимация: стойност; - Opera браузър;
-MS-анимация: стойност; - за Internet Explorer.

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

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

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

С уважение, Виталий Кирилов