CSS3 анимация и пример за нейното използване, безкрайно повторение
Основи на създаването
Така че, на първо място, трябва да започнете с това как да го създадете. Вероятно сте свикнали с факта, че всяко нещо в css се реализира чрез предписване на желания селектор с желаните свойства с подходящите стойности. Така че, когато създавате анимация, само това е незаменимо. Схемата изглежда така:
Създаване на самите ефекти на прехода с @keyframes
На желания елемент се дава същата анимация, както и нейните параметри (всичко това чрез свойства и техните стойности).
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
И така, първо трябва да опишем необходимите промени в @keyframes, нека да разгледаме по-отблизо как да работим с тях.
Синтаксис @keyframes
Всъщност ще ми бъде по-лесно да ви обясня всичко с помощта на готов пример, макар и много прост. Ето го (кодът се добавя към css файла):
И така, след ключовата дума @keyframes идва произволна дума, която ще действа като име на анимацията. В нашия случай това е „пулс“. След това се отварят фигурни скоби, в които са написани необходимите правила.
Процентите са така наречените времеви марки, при които посочените свойства ще бъдат добавени към елемента. В нашия случай написаното означава следното: в самото начало на изпълнението размерът на шрифта ще бъде 50 пиксела, в средата ще се увеличи до 60, а в края отново ще намалее до първоначалния размер.
Ключовите думи от и до могат да заменят процентното обозначение, те означават съответно 0% и 100%, т.е. началото и края на възпроизвеждането.
Прилагане на анимация в действие
Засега имаме само код, който генерира анимационен ефект, но той не се прилага никъде. Ако актуализирате свояуеб страница, нищо няма да се промени в нея. Съответно, за да приложите анимация, трябва да извършите две действия:
Изберете елемента, за който ще се прилага
Свържете го с правилата, описани чрез @keyframes (чрез името), както и задайте допълнителни настройки, ако е необходимо.
В моя html файл създадох блок със сянката на класа, който съдържа обикновен ред текст. Нашата цел е да приложим анимационните ефекти, които описахме по-рано, към този текстов елемент.
Има две задължителни свойства, които трябва да посочите в този случай, за да работи всичко. Първо, това е името, което написахме в ключови кадри. Второ, това е продължителността на анимацията, защото без този параметър браузърът просто не може да я възпроизведе.
Така че в допълнение към стиловете, които нашият блок вече има, ние добавяме нови:
Така ние свързахме елемента с анимацията, описана по-рано, и също така посочихме продължителността му. Рефрешнете страницата и ще видите, че всичко вече работи - ефектът ни наистина ще бъде изпълнен, но само веднъж.
За да контролирате броя на повторенията, има още едно свойство:
Така всичко ще се повтори 4 пъти, след което ще спре. Както разбирате, вместо четири можете да въведете произволно число.
безкрайна анимация в css3
Изпълнява се много лесно, като се използва същото свойство. Всъщност можете просто да ударите броя на повторенията в няколко хиляди, това е напълно достатъчно, но на теория нашата анимация няма да се повтаря безкрайно.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3
Препоръчвам да напишете това, за да реализирате безкрайни повторения:
Всички, сега ниенаправи безкраен цикъл. Не ви съветвам да проверявате дали това е така, след като цял живот сте седели пред монитора. Използва се само в случаите, когато искате ефектът да се повтаря постоянно и да не изчезва. Ако е ненатрапчив и не разсейва потребителя, тогава защо не.
Забавяне преди старт
По подразбиране възпроизвеждането започва, след като страницата се зареди напълно. Това поведение може да се контролира с помощта на свойството animation-delay. Стойността му е дадена в секунди.
Посока
Друго интересно свойство е animation-direction. По подразбиране е зададено като нормално, ако зададете обратна посока, тогава всички описани кадри ще бъдат изпълнени в обратна посока. Нека да проверим каква е разликата. За да направя това, леко промених ефекта, като добавих още една рамка.
Така че, с нормална посока в първата половина на анимацията, размерът на шрифта ще се увеличи до 60 пиксела, след което отново ще се увеличи рязко, вече до 80, след което ще се върне в първоначалната си позиция.
Ориз. 2. Оригинален размер на текста
Ориз. 3. Размер на шрифта в края на анимацията, преди внезапно връщане към първоначалното си състояние.
Всичко се обърна с главата надолу. Първо, текстът ще се увеличи с до 30 пиксела, до 80, останалата част от анимацията постепенно ще намалее, като в крайна сметка ще се върне към предишния си размер. Всичко е просто.
Анимация на формата
И това е може би една от най-интересните настройки, в експерименти, с които можете да отнеме много време. По подразбиране всички промени се правят с еднаква скорост. Този тип анимация се нарича линейна, но има и други:
Изпълнението ще започне бавно, след това ще се ускори и накрая ще се забави отново. Освен това има и други ефекти: ease-in, ease-out, ease-in-out. Няма да ги описвам всички, можете да го направите самиопитайте да ги приложите към елементи.
Съкратена нотация
За да напишете всички горепосочени параметри в един ред и да спестите много място в кода, използвайте съкратената нотация:
Мисля, че това е достатъчно, за да създадете свои собствени интелигентни анимации. Много повече тук зависи от вашето въображение. Както можете да видите, не трябва да се знаят твърде много свойства, за да се внедрят красиви неща на страницата.
Всъщност разгледахме само основните характеристики. Например, същата форма на анимация може да бъде зададена с помощта на функцията за кубични криви на Безие, но това е по-трудна тема за обсъждане, дори бих казал, абсолютно не е необходима за начинаещ, защото горните свойства определено ще ви бъдат достатъчни, за да създадете прости и доста сложни анимационни ефекти.
И така, това беше пример за css3 анимация, има още много такива примери, но основното тук е да разберете същността, да разберете синтаксиса на @keyframes и тогава няма да имате проблеми. Други свойства на css3, които можете да научите в този курс. Абонирайте се за нашия блог, за да получавате страхотни материали за изграждане на уебсайтове.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3