ХТМЛ језик обезбеђује структуру веб странице, а ЦСС обезбеђује дизајн и форматирање те апликације. Ова комбинација вам такође омогућава да додате анимацију, јер анимирани елементи изгледају привлачније у поређењу са статичним елементима. Такође омогућава елементу да постепено мења свој стил.
Овај чланак ће водити како можемо да применимо анимацију на елементе. Дакле, почнимо!
Шта су кључни кадрови ЦСС анимације?
Да бисмо завршили анимацију, морамо да повежемо анимацију са ХТМЛ елементом. У ту сврху користите кључну реч „ @кеифрамес ” након чега следи назив анимације. Ова компонента одређује почетак и крај анимације.
Како подесити кључне кадрове ЦСС анимације?
Да бисмо подесили кључне кадрове анимације у ЦСС-у, проћи ћемо кроз два примера.
Пример 1
Да бисте подесили кључне кадрове анимације у ЦСС-у, извршите следеће кораке:
-
- Додајте <див> са именом класе “ маин-див ”.
- Унутар дива додајте још један див са именом класе “ имг-пенг ”.
- Унутар овог имг-пенг дива додајте <имг> да бисте поставили слику. Ова ознака има три атрибута, „ срц ” атрибут за обезбеђивање путање слике, “ све ” је алтернативни текст који се додаје ако слика није приказана, а „ ширина ” атрибут да обезбеди ширину слике.
ХТМЛ
< див класа = 'главни див' >
< див класа = 'имг-пенг' >
< имг срц = 'имагес/пингвин.пнг' све = 'пингвин' ширина = '100' >
див >
див >
ЦСС
ширина: 90 % ;
висина: 90пк;
боја позадине: ргб ( 67 , 66 , 87 ) ;
маргина: 20пк ауто;
паддинг: 10пк;
}
У ЦСС-у, „ .маин-див ” се додаје за приступ див класи. Својства која се примењују на њега су објашњена у наставку:
-
- “ ширина ” вредност својства дефинише ширину дива.
- “ висина ” својство се користи за подешавање висине дива.
- “ боја позадине ” својство примењује боју на позадину елемента.
- “ маргина ” је постављен као „ 20пк ауто “, што означава простор одозго и одоздо, а ауто значи једнак простор са леве и десне стране.
- “ паддинг ” вредност својства је додељена као 10пк, што примењује простор око садржаја елемента.
Стил имг-пенг класе
.имг-пенг {ширина: 50пк;
висина: 100пк;
положај: релативан;
анимација: схаке;
анимација-трајање: 2с;
анимација-временска-функција: 2с;
аниматион-итератион-цоунт: бесконачно;
}
„ .имг-пенг ” се користи за приступ див класи, поменутој у горњој ХТМЛ датотеци. Овај елемент див је стилизован са својствима која се разматрају у наставку:
-
- “ ширина ” вредност својства се користи за подешавање ширине елемента.
- “ висина ” вредност својства се користи за подешавање висине елемента.
- “ положај ” својству је додељена вредност “ у односу “, што значи да ће бити позициониран у односу на свој нормалан положај.
- “ анимација ” име је дато као “ мућкати ”. Међутим, можете именовати анимацију према захтеву.
- “ анимација-трајање ” представља трајање анимације, које износи 2 секунде.
- “ анимација-временска-функција ” је додељена вредност од 2с што значи да је анимација завршена за 2 секунде.
- “ анимација-итерација-број ” је постављено као бесконачно, што значи да ће се ова анимација појавити у бесконачно време.
Дефинишите @кеифрамес са кључним речима до и од
@ кључни кадрови се тресу {из {
врх: 50пк;
}
до {
маргин-боттом: 200пк;
}
}
Опис кључних кадрова анимације постављених на слику је наведен у наставку:
-
- “ @кеифрамес се тресе ” се односи на име анимације схаке праћено кључном речи @кеифрамес. У оквиру овог правила је специфицирано понашање анимације.
- Унутар његових витичастих заграда, „ из ' и ' до ” кључне речи одређују различите интервале за дефинисање понашања анимације.
- „ топ ” својству је додељена вредност од 50пк, што значи да анимација почиње од 50пк од врха екрана и наставља се до 200пк на дну.
Као резултат, видећете следећи излаз:
Сада, нека се анимација понаша другачије у различитим интервалима. Да бисте то урадили, користите проценте анимације у @кеифрамес.
Наведите @кеифрамес са процентима
@ кључни кадрови се тресу {0 % {
лево: -50пк ;
}
25 % {
лево: 50пк;
}
педесет % {
лево: -25пк ;
}
75 % {
лево: 25пк;
}
100 % {
лево: 10пк;
}
}
Дакле, овде се помиње опис горњег исечка кода:
-
- Процентуалне вредности 0%, 25%, 50%, 75% и 100% представљају анимацију у различитим интервалима.
- Штавише, на 0%, простор са леве стране слике ће бити „ -50пк ”. На 25%, простор са леве стране ће бити „ 50пк ”. На 50%, простор са леве стране ће бити „ -25пк ”. На 75%, леви простор ће бити „ 25пк “, а када се анимација заврши (100%), леви простор ће бити „ 10пк ”.
Горњи код приказује следећу анимацију:
Узмимо још један пример да видимо како можемо да поставимо анимације сликама.
Пример 2
У ХТМЛ, додајте <див> са именом класе “ Насловна страна ”. Унутар овог елемента <див> поставите још две див ознаке са класама “ цлоуд1 ' и ' цлоуд2 ', редом.
ХТМЛ
< див класа = 'Насловна страна' >< див класа = 'облак1' > див >
< див класа = 'облак2' > див >
див >
ЦСС
маргина: 0 ;
паддинг: 0 ;
}
У ЦСС-у ћемо елементу тела доделити следећа ЦСС својства:
-
- “ маргина ” својство као 0 не наводи простор око елемента.
- “ паддинг ” својство са вредношћу 0 не наводи простор око садржаја елемента.
Стил главне странице див
.Насловна страна {бацкгроунд-имаге: урл ( / слике / вучја ноћ.пнг ) ;
бацкгроунд-репеат: без понављања;
величина позадине: корице;
висина: 100вх;
положај: релативан;
преливање: скривено;
}
овде:
-
- “ .Насловна страна ” се користи за приступ див класи.
- “ позадинска слика ” својству је додељена вредност “ урл(/имагес/волф-нигхт.пнг) ” где је слике фасцикла која садржи слику вукова ноћ.пнг.
- “ бацкгроунд-репеат ” својству је додељена вредност “ без понављања , што значи да ће слика бити приказана једном.
- “ величина позадине ” је постављен као „ поклопац ” да попуните цео елемент див.
- “ висина ” је 100вх што је 100% висине прозора.
- “ положај ” као релативни поставља позицију слике у односу на њену тренутну локацију.
- “ преливати ” вредност својства је постављена као скривена да би се сакрио део слике који је превелик да стане у контејнер.
Стил облак1 класа
.цлоуд1 {бацкгроунд-имаге: урл ( / слике / цлоуд.пнг ) ;
бацкгроунд-сизе: садржи;
бацкгроунд-репеат: без понављања;
позиција: апсолутна;
врх: 100пк;
ширина: 500пк;
висина: 300пк;
анимација: цлоуданиматион1;
анимација-трајање: 70с;
аниматион-итератион-цоунт: бесконачно;
}
Див класа цлоуд1 се примењује са следећим објашњеним својствима:
-
- “ .цлоуд1 ” се користи за приступ див класи цлоуд1.
- “ позадинска слика ” својство је постављено као урл(/имагес/цлоуд.пнг), где су слике фасцикла која садржи слику цлоуд.пнг.
- “ величина позадине ” са вредношћу “ садржати ” обезбеђује видљивост слике.
- “ бацкгроунд-репеат ” својство са вредношћу постављеном као „ без понављања ” приказује слику као непоновљена.
- “ положај ” као апсолутно позиционира слику у односу на њен родитељски елемент.
- “ топ ” својство поставља слику на 100 пиксела од врха.
- “ ширина ” својство се користи за подешавање ширине елемента див на 500 пиксела.
- “ висина ” својство се користи за подешавање висине елемента див на 300 пиксела.
- “ анимација ” се додељује назив цлоуданиматион1.
- “ анимација-трајање ” представља трајање анимације, које износи 70 секунди.
- “ анимација-итерација-број ” се додељује вредност бесконачно, која ће понављати анимацију бесконачно.
До сада смо применили ЦСС својства на главну страницу див класе и цлоуд1. Сада, у следећем одељку, стилизоваћемо следећу див класу под називом цлоуд2.
Стиле цлоуд2 цласс
.цлоуд2 {бацкгроунд-имаге: урл ( / слике / цлоуд.пнг ) ;
бацкгроунд-сизе: садржи;
бацкгроунд-репеат: без понављања;
позиција: апсолутна;
врх: 50пк;
ширина: 200пк;
висина: 300пк;
анимација: цлоуданиматион2;
трајање анимације: 15 с;
аниматион-итератион-цоунт: бесконачно;
}
Див класа цлоуд2 се примењује са својствима која су објашњена у наставку:
-
- “ .цлоуд2 ” се користи за приступ класи цлоуд2.
- “ позадинска слика ” својство је постављено као урл(/имагес/цлоуд.пнг), где је слика фасцикла која садржи слику цлоуд.пнг.
- “ величина позадине ” садржи вредност која осигурава видљивост слике.
- “ бацкгроунд-репеат ” својство са вредношћу постављеном као не-понављање приказује слику као не-понављање.
- “ положај ” као апсолутно позиционира слику у односу на њен родитељски елемент.
- “ топ ” својство поставља слику на 100 пиксела од врха.
- “ ширина ” својство се користи за подешавање ширине елемента див.
- “ висина ” својство се користи за подешавање висине елемента див.
- “ анимација ” се додељује назив цлоуданиматион2.
- “ анимација-трајање ” представља трајање анимације.
- “ анимација-итерација-број ” се додељује вредност бесконачно, која ће понављати анимацију бесконачно.
Наведите @кеифрамес за цлоуданиматион1
@ кеифрамес цлоуданиматион1 {до {
лево: 0пк;
}
из {
лево: 100 % ;
}
}
Цлоуд1 див је повезан са анимацијом која је описана у наставку:
-
- “ @кеифрамес цлоуданиматион1 ” иза имена анимације цлоуданиматион1 следи кључна реч @кеифрамес која се користи за спецификацију прелаза.
- Кључна реч @кеифрамес одређује како се анимација ради од почетка до краја на сликама у облаку.
- „ до ' и ' из ” кључне речи одређују да ће се цлоуд1 померити са 100% на 0пк екрана.
Наведите @кеифрамес за цлоуданиматион2
@ кеифрамес цлоуданиматион2 {0 % {
лево: 0 % ;
}
100 % {
лево: 100 % ;
}
}
Див класа цлоуд2 је повезана са анимацијом која је објашњена у наставку:
-
- “ @кеифрамес цлоуданиматион2 ” представља име анимације цлоуданиматион2 праћено кључном речи @кеифрамес која се користи за спецификацију анимације.
- „ 0% ' и ' 100% ” представљају почетак и крај анимације.
- На 0% анимације, облак би био са леве стране са вредношћу постављеном на 0%, и постепено ће се померати на 100% ширине.
Излаз
То је кул! Разговарали смо о томе како можемо успешно одредити анимацију за елементе користећи кључну реч @кеифрамес.
Закључак
ЦСС нам дозвољава да применимо стилове на ХТМЛ елементе. Анимација у ЦСС-у врши прелазе из једног стила у други. Састоји се од две компоненте, стилова анимације и кључних кадрова. Стилови анимације представљају различита својства као што су њихово име, трајање анимације, број итерација анимације и још много тога. Док компонента кључног кадра дефинише почетак и крај анимације. Овај водич је разрадио како да подесите кључне кадрове анимације са примерима.