CSS е един от най-мощните начини да направите уеб страницата интерактивна. Той трансформира външния вид и усещането на нашите основни уеб страница. Една от важните и вълнуващи функции, които CSS предлага, е, че ни позволява да изпълняваме анимации. Позволява ни да преместваме елементите в нашата страница. Нека започнем нашето Пътешествие на анимациите в CSS в следния ред:
Анимации в CSS
Добавянето на анимации към нашия уебсайт е чудесен начин да привлечете вниманието на потребителите. Това не само добавя стойност към нашата страница, но и обогатява потребителското изживяване. Анимацията в CSS е изградена от две части. Те са
- Ключови кадри
- Анимация
CSS анимациите се поддържат във всички браузъри. Някои по-стари браузъри като Safari (до версия 8.0) обаче изискват префикс (-webkit-), за да интерпретират свойствата на анимацията. Например:
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителна граница-радиус: 100% -webkit-animation-name: cssanim / * стари браузъри * / -webkit-animation-продължителност: 5s / * стари браузъри * / анимация -name: cssanim animation-duration: 5s} / * стари браузъри * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Можем да използваме примерната html страница отгоре и да заменим CSS кода в стиловия маркер за изпробване на допълнителни примери.
Ключови кадри в CSS
Това е градивният елемент на анимациите в CSS. Той използваше за определяне на конкретни моменти и стилове на анимацията на нашата уеб страница. С други думи, когато посочим @keyframes вътре в нашия CSS, той получава контрола за модифициране на текущото състояние в ново състояние или анимиране на обектите за определена продължителност.
@Keyframes трябва да имат определени свойства за управление на анимацията, като името на анимацията, етапите и свойствата.
Име - Името трябва да бъде за всяка анимация, за да опише нейното поведение.
Етапи - Сцената представлява завършване на анимация. Може да се направи, обозначено с ключова дума „до“ и „от“ или като процент, докато 0% представлява началното състояние и 100% представлява крайното състояние на анимацията. Ползата от използването на процентното представяне е, че можем да дефинираме множество междинни етапи между тях, т.е. какво трябва да бъде поведението на анимацията на 50% етап или 75% и т.н.
Имоти - Тези свойства ни дават контрол върху @keyframes, за да ги манипулираме по време на анимацията.
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителна граница-радиус: 100% анимация-име: cssanim анимация-продължителност: 5s} @keyframes cssanim {0% {transform: scale (0.5) непрозрачност: 0} 50 % {трансформация: мащаб (1.5) непрозрачност: 1} 100% {трансформация: мащаб (1)}}Сега, тъй като сме наясно с дефинирането на ключови кадри. Нека изследваме свойствата на анимацията, за да опишем как да анимираме нашите елементи и обекти. Двете свойства, т.е. наследяване и начално може да се използват с всички типове анимация. Тези свойства обикновено се използват заедно с тага div, за да показват различно поведение.
първоначално: Задава това свойство на стойността му по подразбиране.
наследявам: Наследява това свойство от неговия родителски елемент.
Свойства на анимацията
- анимация-име
Той определя името на анимацията, която се използва в @keyframes за манипулиране.Възможните стойности са:
- име: Това указва името, което да се свързва с ключовия кадър за анимация.
- нито един: Това е стойността по подразбиране и може да се използва за отмяна на наследените или каскадни анимации.
Синтаксис:
анимация-име: име | няма | начална | наследявам
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителна граница-радиус: 100% име на анимация: cssanim анимация-продължителност: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- продължителност на анимацията
Той определя времето, необходимо на една анимация да завърши едно изпълнение. Определя се в секунди или милисекунди (напр. 4s или 400ms). Стойността по подразбиране на това свойство е 0s, така че ако това свойство не е посочено, анимацията няма да се осъществи.
Синтаксис:
каква е разликата между git и github
анимация-продължителност: време
.anim {височина: 200px ширина: 200px фон: синя позиция: относителна граница-радиус: 100% име на анимация: cssanim продължителност на анимацията: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {трансформация: мащаб (1.4) непрозрачност: 1} 100% {трансформация: мащаб (1)}}- забавяне на анимацията
Свойството за забавяне на анимацията ни позволява да зададем закъснението в анимацията. Той определя кога анимационната последователност ще започне изпълнението.
Стойността на това свойство може да бъде декларирана за секунди или милисекунди (ms). Той може да съдържа както положителни, така и отрицателни стойности. Положителната стойност показва, че анимацията ще започне след изтичане на определеното време и дотогава тя ще остане не анимирана. От друга страна, отрицателната стойност веднага ще стартира анимацията от точката, сякаш тя вече се изпълнява за определен период от време.
Синтаксис:
забавяне на анимацията: време
.anim {височина: 200px ширина: 200px фон: светлосиня позиция: относителен радиус на границата: 100% име на анимация: cssanim продължителност на анимацията: 4s забавяне на анимацията: 4s} @keyframes cssanim {0% {left: 0px} 100% {вляво: 250px}}- анимация-итерация-брой
Това свойство показва колко пъти трябва да се възпроизвежда анимационна последователност. Стойността по подразбиране на това свойство е 1.Възможните стойности са:
- номер - обозначава броя повторения
- безкраен - показва, че анимацията трябва да се повтаря завинаги
Синтаксис:
анимация-итерация-брой: брой | безкраен
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителна граница-радиус: 100% име на анимация: cssanim продължителност на анимация: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {вляво: 100px}}- анимация-посока
Той определя посоката на анимацията. Посоката на елемента може да бъде настроена да играе напред, назад или в алтернативни цикли.Стойността по подразбиране на това свойство е нормална и се нулира при всеки цикъл.Възможните стойности са:
нормално - Това е поведението по подразбиране и анимацията се възпроизвежда напред. След всеки цикъл анимацията стига до първоначалното си състояние и се възпроизвежда отново
обратен - Анимацията се възпроизвежда в обратна посока. След всеки цикъл анимацията достига своето крайно състояние и се възпроизвежда назад
заместник - Посоката на анимацията е обърната, т.е. тя играе първо напред и след това назад във всеки цикъл. Всеки нечетен цикъл прави анимация напред и всеки четен цикъл прави движение назад.
алтернативно-обратен - Посоката на анимацията се обменя последователно. Тук анимацията се възпроизвежда първо назад и след това напред във всеки цикъл. Всеки нечетен цикъл се движи назад или назад и всеки четен цикъл прави анимация напред.
Синтаксис:
анимация-посока: нормално | обратен |заместник | алтернативно-обратен
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителен радиус на границата: 100% име на анимация: cssanim продължителност на анимацията: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {вляво: 100px}}- функция за анимация-синхронизация
Това свойство определя кривата на скоростта или стила на движение на анимацията. Присвоява се плавна промяна в стила на анимацията от една форма в друга. Ако не е зададена стойност, по подразбиране се улеснява.Възможните стойности за функция анимация-време са:
лекота - Това е стойността по подразбиране на собствеността. Тук анимацията започва бавно, постепенно става бърза в средата и след това отново завършва бавно.
линейна - Анимацията поддържа същата скорост през целия цикъл, т.е. от началото до края.
лекота - Анимацията започва бавно.
типове функции в sql
облекчаване - Анимацията завършва бавно.
лекота навлизане - Анимацията се движи бавно както по време на началото, така и в края.
кубично-безие (n, n, n, n) - Тази усъвършенствана функция ни позволява да създадем персонализирана функция за синхронизиране, като дефинираме собствените си стойности. Възможната стойност варира от 0 до 1.
Синтаксис:
функция за анимация-време: линейна | лекота | улеснение | улеснение | лекота навлизане |кубично-безие (n, n, n, n)
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителен радиус на границата: 100% име на анимация: cssanim продължителност на анимация: 2s посока на анимация: обратна} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- режим на анимация-запълване
Това е специално свойство, тъй като определя стила на анимацията преди или след възпроизвеждането на анимацията.По подразбиране стилът на елемента не се влияе от анимацията преди началото или след края му. Това свойство е полезно, тъй като помага за отмяна на това поведение по подразбиране на анимацията.Следните възможни стойности за свойството animation-fill-mode:
нито един - Това е стойността по подразбиране на свойството, т.е. стиловете на анимация не се прилагат към елемента, преди или след анимацията.
напред - Стиловете се задържат от елемента в последната анимационна последователност, т.е. след завършване на анимацията.
наопаки - Стиловете се задържат от елемента в първоначалната анимационна последователност, т.е. преди анимацията да се загледа особено по време на забавяне на анимацията.
и двете - Това означава, че анимацията ще следва както в посоката, т.е. напред и назад
Синтаксис:
режим за запълване на анимация: няма | напред | назад | и двете
.anim {ширина: 50px височина: 50px фон: светлосин цвят: бял шрифт-тегло: получер позиция: относително име на анимация: cssanim продължителност на анимацията: 5s анимация-итерация-брой: безкраен радиус на границата: 100%} # anim1 { animation-timing-function: лекота} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easy-in} # anim4 {animation-timing-function: easy-out} # anim5 {animation- тайминг-функция: улеснение-излизане} @keyframes cssanim {от {ляво: 0px} до {ляво: 400px}}- анимация-игра-състояние
Това свойство указва анимация, която да бъде в състояние на възпроизвеждане или на пауза. Също така, когато анимацията се възобнови от пауза, тя започва от мястото, където е оставила.Възможните стойности са:
- играе - За да визуализирате анимацията в изпълнение
- на пауза - За да направите анимацията в състояние на пауза.
Синтаксис:
animation-play-state: пауза | играе
.anim {ширина: 100px височина: 100px фон: lightblue позиция: относително име на анимация: cssanim продължителност на анимация: 3s забавяне на анимацията: 2s режим на запълване на анимация: назад-радиус на границата: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- анимация
Това е известно като анимационно стенографско свойство. Използва се за по-чист код. След като се свикнем с всички свойства на анимацията, препоръчително е да използваме стенограмата за анимация за по-бързо кодиране и дефиниране на всички свойства в един ред.
Синтаксис:
анимация: [име на анимация] | [продължителност на анимацията] | [функция за анимация-време] |[забавяне на анимацията] | [анимация-итерация-брой] | [анимация-посока] |[режим на запълване на анимация] | [състояние на анимация-игра]
Всички анимационни ефекти, които показваме по-горе, използвайки различни анимационни свойства, могат да бъдат постигнати с помощта на стенографиятаанимация Имот.
.anim {височина: 200px ширина: 200px фон: lightblue позиция: относителна граница-радиус: 100% име на анимация: cssanim продължителност на анимация: 2s посока на анимация: нормална анимация-състояние-игра: пауза} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Това завършва всички свойства на анимацията, които могат да се използват в CSS. Трябва да опитаме различни варианти на тези свойства, за да получим по-ясна картина. Когато се чувстваме удобно, анимационното стенографско свойство може да бъде от голяма помощ за писане на по-чист и бърз код. Това е едно от важните умения за усвояване в CSS за уеб разработчиците. Тъй като сме склонни да се фокусираме повече върху движещи се обекти, а не върху статични, анимациите могат да ни помогнат да постигнем това, а също така да разработим страхотни забележителни уеб страници.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „Анимации в CSS“ и ние ще се свържем с вас.