Све што треба да знате да бисте применили анимације у ЦСС-у

Овај чланак ће вам пружити детаљно и свеобухватно знање о примени анимација у ЦСС са примерима.

ЦСС је један од најснажнијих начина за стварање веб странице интерактивном. Она трансформише изглед и осећај наших основних интернет страница. Једна од важних и узбудљивих карактеристика које ЦСС нуди је та што нам омогућава извођење анимација. Омогућава нам да померамо елементе унутар наше странице. Започнимо наше Путовање анимација у ЦСС-у следећим редоследом:

Анимације у ЦСС-у

Додавање анимација на нашу веб страницу је одличан начин да скренете пажњу корисника. То не само да додаје вредност нашој страници већ и обогаћује корисничко искуство. Анимација у ЦСС-у изграђена је из два дела. Су



  • Кеифрамес
  • Анимација
    Анимације у ЦСС-у

ЦСС анимације подржане су у свим прегледачима. Међутим, неки старији прегледачи, као што је Сафари (до верзије 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пк}}

Овим су закључена сва својства анимације која се могу користити у ЦСС-у. Требали бисмо испробати различите варијације ових својстава да бисмо добили јаснију слику. Кад се удобно прилагодимо, стенографско својство анимације може бити од велике помоћи за писање чистијег и бржег кода. Ово је једна од важних вештина за учење у ЦСС-у за веб програмере. Будући да смо склони да се више фокусирамо на покретне објекте, а не на статичне, анимације нам могу помоћи да то постигнемо и такође развити сјајне изванредне веб странице.

Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.

Имате питање за нас? Молимо вас да то спомињете у одељку за коментаре блога „Анимације у ЦСС-у“ и јавићемо вам се.