Езикът HTML осигурява структурата на уеб страницата, а CSS осигурява дизайна и форматирането на това приложение. Тази комбинация също ви позволява да добавяте анимация, тъй като анимираните елементи изглеждат по-привлекателни в сравнение със статичните елементи. Той също така позволява на елемента да променя стила си постепенно.
Тази статия ще ви насочи как можем да приложим анимация към елементите. И така, да започваме!
Какво представляват ключовите кадри за CSS анимация?
За да направим анимацията, трябва да свържем анимацията към HTML елемента. За целта използвайте ключовата дума „ @ключови рамки ”, последвано от името на анимацията. Този компонент определя началото и края на анимацията.
Как да настроите ключови кадри за CSS анимация?
За да настроим ключови кадри за анимация в CSS, ще преминем през два примера.
Пример 1
За да настроите ключови кадри за анимация в CSS, изпълнете следните стъпки:
-
- Добавете с име на клас „ главен-разр ”.
- Вътре в div добавете друг div с името на класа „ img-peng ”.
- Вътре в този div img-peng добавете
, за да поставите изображението. Този етикет има три атрибута, „ src ' атрибут за осигуряване на пътя на изображението, ' всичко ” е алтернативният текст, който се добавя, ако изображението не се показва, а „ ширина ” за предоставяне на ширината на изображението.
HTML
< див клас = 'main-div' >
< див клас = 'img-peng' >
< img src = 'images/penguin.png' всичко = 'пингвин' ширина = '100' >
див >
див >
.main-div {
CSS
ширина: 90 % ;
височина: 90px;
цвят на фона: rgb ( 67 , 66 , 87 ) ;
поле: 20px автоматично;
подложка: 10px;
}
В CSS, „ .main-div ” се добавя за достъп до класа div. Приложените към него свойства са обяснени по-долу:-
- “ ширина ” Стойността на свойството определя ширината на div.
- “ височина ” се използва за задаване на височината на div.
- “ Цвят на фона ” свойство прилага цвят към фона на елемента.
- “ марж ” е зададено като „ 20px кола ”, което показва разстоянието отгоре и отдолу, а auto означава равно разстояние отляво и отдясно.
- “ подплата ” стойността на свойството е присвоена като 10px, което прилага пространство около съдържанието на елемента.
Стил img-peng клас
.img-peng {
ширина: 50px;
височина: 100px;
позиция: роднина;
анимация: разклащане;
анимация-продължителност: 2s;
функция за време на анимация: 2s;
animation-iteration-count: безкраен;
}
„ .img-peng ” се използва за достъп до класа div, споменат в горния HTML файл. Този елемент div е стилизиран със свойствата, обсъдени по-долу:-
- “ ширина ” стойността на свойството се използва за задаване на ширината на елемента.
- “ височина ” стойността на свойството се използва за задаване на височината на елемента.
- “ позиция на свойството е присвоена стойността роднина ”, което означава, че ще бъде позициониран спрямо нормалното си положение.
- “ анимация ” името е дадено като „ клатя ”. Въпреки това можете да наименувате анимация според изискванията.
- “ анимация-продължителност ” представлява продължителността на анимацията, която е 2 секунди.
- “ функция за време на анимация ” се присвоява стойност от 2s, което означава, че след 2 секунди анимацията е завършена.
- “ animation-iteration-count ” е зададено като безкрайно, което означава, че тази анимация ще се появи за безкрайно време.
Дефинирайте @keyframes с ключови думи към и от
@ ключовите кадри се разклащат {
от {
отгоре: 50px;
}
да се {
margin-bottom: 200px;
}
}
Описанието на ключовите кадри на анимацията, зададени към изображението, е посочено по-долу:-
- “ @keyframes се разклаща ” се отнася до името на анимацията shake, последвано от ключовата дума @keyframes. В рамките на това правило се определя поведението на анимацията.
- Вътре във къдрави скоби „ от ' и ' да се ” ключовите думи указват различни интервали за определяне на поведението на анимацията.
- „ Горна част ” се присвоява стойност от 50px, което означава, че анимацията започва от 50px от горната част на екрана и продължава до 200px в долната част.
В резултат на това ще видите следния резултат:
Сега оставете анимацията да се държи различно на различни интервали. За да направите това, използвайте процентите на анимацията в @keyframes.Посочете @keyframes с проценти
@ ключовите кадри се разклащат {
0 % {
наляво: -50px ;
}
25 % {
ляво: 50px;
}
петдесет % {
наляво: -25px ;
}
75 % {
ляво: 25px;
}
100 % {
ляво: 10px;
}
}
И така, описанието на горния кодов фрагмент е споменато тук:-
- Процентните стойности 0%, 25%, 50%, 75% и 100% представляват анимацията на различни интервали.
- Освен това, при 0%, пространството отляво на изображението ще бъде „ -50px ”. При 25% пространството отляво ще бъде „ 50px ”. При 50% пространството отляво ще бъде „ -25px ”. При 75% лявото пространство ще бъде „ 25px “, а когато анимацията завърши (100%), лявото пространство ще бъде „ 10px ”.
Горният код показва следната анимация:
Нека вземем друг пример, за да видим как можем да зададем анимации към изображенията.Пример 2
В HTML добавете
с име на клас „ Главна страница ”. Вътре в този елементпоставете още два етикета div с класове “ облак1 ' и ' облак2 ”, съответно.HTML
< див клас = 'Главна страница' >
< див клас = 'облак1' > див >
< див клас = 'облак2' > див >
див >
тяло {
CSS
марж: 0 ;
подплата: 0 ;
}
В CSS ще присвоим следните CSS свойства на елемента body:-
- “ марж ” като 0 не указва интервал около елемента.
- “ подплата ” със стойност 0 не указва интервал около съдържанието на елемента.
Стил главна страница div
.Главна страница {
фоново изображение: url ( / изображения / вълча нощ.png ) ;
фоново повторение: без повторение;
размер на фона: корица;
височина: 100vh;
позиция: роднина;
преливане: скрито;
}
Тук:-
- “ .Главна страница ” се използва за достъп до класа div.
- “ фоново изображение на свойството е присвоена стойността url(/images/wolf-night.png) ”, където images е папката, която съдържа изображението wolf-night.png.
- “ фоново повторение на свойството е присвоена стойността не-повтаряне , което означава, че изображението ще се покаже веднъж.
- “ размер на фона ” е зададено като „ Покрийте ”, за да запълните целия елемент div.
- “ височина ” е 100vh, което е 100% от височината на прозореца за изглед.
- “ позиция ” като относителен задава позицията на изображението спрямо текущото му местоположение.
- “ препълване ” стойността на свойството е зададена като скрита, за да скрие частта от изображението, която е твърде голяма, за да се побере в контейнера.
Стил облак1 клас
.облак1 {
фоново изображение: url ( / изображения / cloud.png ) ;
размер на фона: съдържа;
фоново повторение: без повторение;
позиция: абсолютна;
отгоре: 100px;
ширина: 500px;
височина: 300px;
анимация: cloudanimation1;
анимация-продължителност: 70s;
animation-iteration-count: безкраен;
}
Класът div cloud1 се прилага със следните обяснени свойства:-
- “ .облак1 ” се използва за достъп до облака клас div1.
- “ фоново изображение ” е зададено като url(/images/cloud.png), където images е папката, съдържаща изображението cloud.png.
- “ размер на фона ' със стойността ' съдържат ” гарантира видимостта на изображението.
- “ фоново повторение ” свойство със стойност, зададена като „ не-повтаряне ” показва изображението като неповтарящо се.
- “ позиция ” като абсолютен позиционира изображението спрямо неговия родителски елемент.
- “ Горна част ” свойството задава изображението на 100px от горната част.
- “ ширина ” се използва за задаване на ширината на елемента div на 500px.
- “ височина ” се използва за задаване на височината на елемента div на 300px.
- “ анимация ” е присвоено името cloudanimation1.
- “ анимация-продължителност ” представлява продължителността на анимацията, която е 70 секунди.
- “ animation-iteration-count ” се присвоява стойността infinite, която ще повтори анимацията безкрайно много пъти.
Досега сме прилагали свойствата на CSS към класа div main-page и cloud1. Сега, в следващия раздел, ще стилизираме следващия клас div, наречен cloud2.
Стил облак2 клас
.cloud2 {
фоново изображение: url ( / изображения / cloud.png ) ;
размер на фона: съдържа;
фоново повторение: без повторение;
позиция: абсолютна;
отгоре: 50px;
ширина: 200px;
височина: 300px;
анимация: cloudanimation2;
анимация-продължителност: 15s;
animation-iteration-count: безкраен;
}
Класът div cloud2 се прилага със свойствата, които са обяснени по-долу:-
- “ .cloud2 ” се използва за достъп до class cloud2.
- “ фоново изображение ” е зададено като url(/images/cloud.png), където изображението е папка, която съдържа изображението cloud.png.
- “ размер на фона ” съдържа стойност, гарантираща видимостта на изображението.
- “ фоново повторение ” със стойност, зададена като без повторение, показва изображението като неповтарящо се.
- “ позиция ” като абсолютен позиционира изображението спрямо неговия родителски елемент.
- “ Горна част ” свойството задава изображението на 100px от горната част.
- “ ширина ” Свойството се използва за задаване на ширината на елемента div.
- “ височина ” Свойството се използва за задаване на височината на елемента div.
- “ анимация ” е присвоено името cloudanimation2.
- “ анимация-продължителност ” представлява продължителността на анимацията.
- “ animation-iteration-count ” се присвоява стойността infinite, която ще повтори анимацията безкрайно много пъти.
Посочете @keyframes за cloudanimation1
@ ключови кадри облачна анимация1 {
да се {
ляво: 0px;
}
от {
наляво: 100 % ;
}
}
Cloud1 div е обвързан с анимация, която е описана по-долу:-
- “ @keyframes cloudanimation1 ” името на анимацията cloudanimation1 е последвано от ключовата дума @keyframes, която се използва за указване на преход.
- Ключовата дума @keyframes указва как се прави анимацията от началото до края на облачните изображения.
- „ да се ' и ' от ” ключовите думи указват, че cloud1 ще се премести от 100% до 0px на екрана.
Посочете @keyframes за cloudanimation2
@ ключови кадри облачна анимация2 {
0 % {
наляво: 0 % ;
}
100 % {
наляво: 100 % ;
}
}
Класът div cloud2 е свързан с анимацията, която е обяснена по-долу:-
- “ @keyframes cloudanimation2 ” представлява името на анимацията cloudanimation2, последвано от ключовата дума @keyframes, която се използва за указване на анимация.
- „ 0% ' и ' 100% ” представляват началото и края на анимацията.
- При 0% от анимацията облакът ще бъде отляво със стойност, зададена като 0%, и постепенно ще се премести до 100% от ширината.
Изход
Това е яко! Обсъдихме как можем успешно да зададем анимация към елементите, използвайки ключовата дума @keyframes.Заключение
CSS ни позволява да прилагаме стилове към HTML елементи. Анимацията в CSS извършва преходи от един стил към друг. Състои се от два компонента, стиловете на анимация и ключовите кадри. Анимационните стилове представляват различни свойства, като тяхното име, продължителност на анимацията, брой итерации на анимация и други. Докато компонентът на ключовия кадър дефинира началото и края на анимацията. Това ръководство разработи подробно как да настроите ключови кадри на анимация с примери.
- Добавете