ЦСС је један од најснажнијих начина за стварање веб странице интерактивном. Она трансформише изглед и осећај наших основних интернет страница. Једна од важних и узбудљивих карактеристика које ЦСС нуди је та што нам омогућава извођење анимација. Омогућава нам да померамо елементе унутар наше странице. Започнимо наше Путовање анимација у ЦСС-у следећим редоследом:
Анимације у ЦСС-у
Додавање анимација на нашу веб страницу је одличан начин да скренете пажњу корисника. То не само да додаје вредност нашој страници већ и обогаћује корисничко искуство. Анимација у ЦСС-у изграђена је из два дела. Су
- Кеифрамес
- Анимација
ЦСС анимације подржане су у свим прегледачима. Међутим, неки старији прегледачи, као што је Сафари (до верзије 8.0) захтевају префикс (-вебкит-) за тумачење својстава анимације. На пример:
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус границе: 100% -вебкит-аниматион-наме: цссаним / * стари прегледачи * / -вебкит-анимација-трајање: 5с / * стари прегледачи * / анимација -наме: цссаним аниматион-дуратион: 5с} / * стари прегледачи * / @ -вебкит-кеифрамес цссаним {0% {лефт: 0пк} 100% {лефт: 300пк}} @кеифрамес цссаним {0% {лефт: 0пк} 100 % {лефт: 300пк}}Можемо користити пример ХТМЛ странице одозго и заменити ЦСС код у стилској ознаци за испробавање даљих примера.
Кључни кадрови у ЦСС-у
Ово је градивни блок анимација у ЦСС-у. Некада је дефинисао специфичне тренутке и стилове анимације на нашој веб страници. Другим речима, када одредимо @кеифрамес унутар нашег ЦСС-а, он добија контролу за модификовање тренутног стања у ново стање или анимирање објеката на одређено време.
@Кеифрамес морају имати одређена својства за управљање анимацијом, као што су назив анимације, фазе и својства.
Име - Име сваке анимације мора бити описано како би описовало њено понашање.
Фазе - Сцена представља завршетак анимације. То се може означити кључном речи „до“ и „од“ или као проценат, док 0% представља почетно стање, а 100% представља крајње стање анимације. Предност употребе процента представљања је у томе што можемо дефинисати више међуфаза између, тј. Какво би требало бити понашање анимације у фази од 50% или 75% итд.
Својства - Ова својства нам дају контролу над @кеифрамес-има да бисмо њима манипулисали током анимације.
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус обода: 100% име анимације: цссаним трајање анимације: 5с} @кеифрамес цссаним {0% {трансформација: скала (0,5) непрозирност: 0} 50 % {трансформација: скала (1.5) непрозирност: 1} 100% {трансформација: скала (1)}}Сад кад смо јасни у дефинисању кључних оквира. Истражимо својства анимације да бисмо описали како анимирати наше елементе и објекте. Две особине, тј. Наследити и иницијал могу се користити са свим врстама анимације. Ова својства се обично користе заједно са ознаком див за приказивање различитих понашања.
почетно: Поставља ово својство на подразумевану вредност.
наследити: Наслеђује ово својство од надређеног елемента.
Својства анимације
- анимација-име
Одређује назив анимације која се користи у @кеифрамес за манипулацију.Могуће вредности су:
- име: Ово наводи име које ће се везати за кључни кадар за анимацију.
- ниједан: Ово је подразумевана вредност и може се користити за поништавање наслеђених или каскадних анимација.
Синтакса:
анимација-име: име | ниједан | почетни | наследити
за шта се користи монгодб
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус границе: 100% име анимације: цссаним трајање анимације: 5с} @кеифрамес цссаним {0% {лево: 0пк} 100% {лево: 300пк} }- анимација-трајање
Одређује време потребно за анимацију да изврши једно извршење. Дефинисан је у секундама или милисекундама (нпр. 4с или 400мс). Подразумевана вредност овог својства је 0с, па ако ово својство није наведено, анимација се неће одвијати.
Синтакса:
анимација-трајање: време
.аним {висина: 200пк ширина: 200пк позадина: плава позиција: релативни радијус-ивица: 100% име анимације: цссаним трајање анимације: 4с} @кеифрамес цссаним {0% {трансформација: скала (0.4) непрозирност: 0} 50 % {трансформација: скала (1.4) непрозирност: 1} 100% {трансформација: скала (1)}}- анимација-кашњење
Својство одлагања анимације омогућава нам да одредимо кашњење у анимацији. Дефинише када ће секвенца анимације започети извршење.
Вредност овог својства може се декларисати у секундама или милисекундама (мс). Може садржати и позитивне и негативне вредности. Позитивна вредност указује на то да ће анимација започети након истека наведеног времена, а до тада ће остати анимирана. С друге стране, негативна вредност ће одмах покренути анимацију од тачке као да се већ извршава у одређеном временском оквиру.
Синтакса:
кашњење анимације: време
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус-ивица: 100% име анимације: цссаним трајање анимације: 4с застој анимације: 4с} @кеифрамес цссаним {0% {лефт: 0пк} 100% {лево: 250 пиксела}}- анимација-итерација-бројање
Ово својство указује на број репродукција низа анимације. Подразумевана вредност овог својства је 1.Могуће вредности су:
- број - означава број понављања
- бесконачно - указује на то да би се анимација требала понављати заувек
Синтакса:
анимација-итерација-бројање: број | бесконачно
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус обруба: 100% име анимације: цссаним трајање анимације: 2с број анимација-итерација: 4} @кеифрамес цссаним {0% {лефт: 0пк} 100% {лево: 100пк}}- анимација-режија
Дефинише правац анимације. Правац елемента се може подесити да се игра унапред, уназад или у алтернативним циклусима.Подразумевана вредност овог својства је нормална и ресетује се у сваком циклусу.Могуће вредности су:
нормално - Ово је подразумевано понашање и анимација се репродукује унапред. Након сваког циклуса анимација долази у почетно стање и поново се репродукује унапред
обрнуто - Анимација се репродукује уназад. Након сваког циклуса анимација долази у крајње стање и репродукује се уназад
алтернативни - Смер анимације је обрнут, тј. Игра се прво напред, а затим уназад у сваком циклусу. Сваки непарни циклус приказује анимацију унапред, а сваки парни циклус кретање уназад.
наизменично-обрнуто - Смер анимације је наизменично обрнут. Овде се анимација репродукује уназад, а затим унапред у сваком циклусу. Сваки непарни циклус се помера уназад или уназад, а сваки парни циклус приказује анимацију унапред.
Синтакса:
анимација-смер: нормално | обрнути |алтернате | наизменично-обрнуто
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус границе: 100% име анимације: цссаним трајање анимације: 2с анимација-итерација-број: бесконачно} @кеифрамес цссаним {0% {лефт: 0пк} 100% {лево: 100пк}}- функција анимације-времена
Ово својство одређује криву брзине или стил кретања анимације. Задаје се да промена стила анимације врши глатко из једног облика у други. Ако није додељена вредност, подразумевано се олакшава.Могуће вредности функције анимације-време су:
ублажити, лакоца - Ово је подразумевана вредност својства. Овде анимација почиње полако, постепено постаје брза у средини, а затим опет полако завршава.
линеарно - Анимација одржава исту брзину током циклуса, тј. Од почетка до краја.
лагодност - Анимација полако започиње.
лагодност - Анимација се полако завршава.
лакоћа уласка - Анимација се полако креће и током почетка и на крају.
кубни-безиер (н, н, н, н) - Ова напредна функција омогућава нам да креирамо прилагођену функцију временског одређивања дефинишући сопствене вредности. Могућа вредност се креће од 0 до 1.
Синтакса:
функција анимације-времена: линеарна | лакоћа | олакшање | лагодност | лакоћа изласка |кубни-безиер (н, н, н, н)
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус-ивица: 100% име анимације: цссаним трајање анимације: 2с смер анимације: обрнуто} @кеифрамес цссаним {0% {позадина: наранџаста лева: 0пк } 50% {позадина: жута лево: 200пк горе: 200пк} 100% {позадина: плава лева: 100пк}}- мод за попуњавање анимације
Ово је посебно својство јер одређује стил анимације пре или после репродукције анимације.Као и подразумевано, на стил елемента не утиче анимација пре почетка или након завршетка. Ово својство је корисно јер помаже у надјачавању овог подразумеваног понашања анимације.Следеће могуће вредности за својство аниматион-филл-моде:
ниједан - Ово је подразумевана вредност својства, тј. Стилови анимације се не примењују на елемент пре или после анимације.
напред - Елементи задржавају стилове у завршној секвенци анимације, тј. Након завршетка анимације.
уназад - Елементи задржавају стилове у почетном низу анимације, тј. Пре него што се анимација укаже посебно током кашњења анимације.
обоје - Ово значи да ће анимација следити у правцу, тј. Напред и назад
Синтакса:
аниматион-филл-моде: нема | напред | уназад | обоје
.аним {ширина: 50пк висина: 50пк позадина: светлоплава боја: бела фонт-тежина: подебљана позиција: релативно име анимације: цссаним трајање анимације: 5с број анимација-итерација: бесконачни радијус обруба: 100%} # аним1 { анимација-временска-функција: лакоћа} # аним2 {анимација-временска-функција: линеарна} # аним3 {анимација-временска-функција: олакшица} # аним4 {анимација-временска-функција: олакшица} # аним5 {анимација- тиминг-фунцтион: еаси-ин-оут} @кеифрамес цссаним {од {лево: 0пк} до {лево: 400пк}}- анимација-игра-стање
Ово својство наводи анимацију која ће бити у стању репродукције или у паузи. Такође, када се анимација настави из паузе, она почиње тамо где је и остала.Могуће вредности су:
- играње - Да прикажете анимацију у току
- застао - Да се анимација прикаже у стању паузе.
Синтакса:
анимација-игра-стање: паузирано | играње
.аним {ширина: 100пк висина: 100пк позадина: светлоплава позиција: релативно име анимације: цссаним трајање анимације: 3с кашњење анимације: 2с начин анимације-попуњавање: уназад обод радијуса: 100%} @кеифрамес цссаним {0% {топ: 0пк бацкгроунд-цолор: оранге} 50% {топ: 0пк бацкгроунд-цолор: греен} 100% {топ: 100пкбацкгроунд-цолор: блуе}}- анимација
Ово је познато као стенографско својство анимације. Користи се за чистији код. Када се навикнемо на сва својства анимације, саветујемо вам да користимо скраћеницу анимације за брже кодирање и дефинисање свих својстава у једном реду.
Синтакса:
бинарно на децимално у јави
анимација: [име анимације] | [трајање анимације] | [анимација-функција времена] |[кашњење анимације] | [анимација-итерација-бројање] | [режија анимације] |[начин анимације-попуњавања] | [анимација-игра-стање]
Сви ефекти анимације које приказујемо горе користећи различита својства анимације могу се постићи коришћењем стенографијеанимација имовина.
.аним {висина: 200пк ширина: 200пк позадина: светлоплава позиција: релативни радијус-ивица: 100% име анимације: цссаним трајање анимације: 2с смер анимације: нормална анимација-играње-стање: паузирано} @кеифрамес цссаним {0% {бацкгроунд: оранге топ: 0пк} 50% {бацкгроунд: иеллов лефт: 200пк топ: 200пк} 100% {бацкгроунд: блуе лефт: 100пк}}Овим су закључена сва својства анимације која се могу користити у ЦСС-у. Требали бисмо испробати различите варијације ових својстава да бисмо добили јаснију слику. Кад се удобно прилагодимо, стенографско својство анимације може бити од велике помоћи за писање чистијег и бржег кода. Ово је једна од важних вештина за учење у ЦСС-у за веб програмере. Будући да смо склони да се више фокусирамо на покретне објекте, а не на статичне, анимације нам могу помоћи да то постигнемо и такође развити сјајне изванредне веб странице.
Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да то спомињете у одељку за коментаре блога „Анимације у ЦСС-у“ и јавићемо вам се.