Како створити ЦСС анимације кључних оквира

Како створити ЦСС анимације кључних оквира

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





ЦСС анимација се постиже променом почетног стања ХТМЛ елемента кроз његова различита својства. Нека општа својства ЦСС -а која се могу анимирати укључују:



ротирајући видео у Виндовс Медиа Плаиер -у
  • Видтх
  • Висина
  • Позиција
  • Боја
  • Непрозирност

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





Шта је елемент кључних кадрова?

Тхе елемент кључних кадрова може се користити на једном или више ХТМЛ елемената којима има приступ. Идентификује одређену тачку у стању елемента и диктира изглед који овај елемент мора имати у овом тренутку.

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



Пример структуре кључних оквира


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Рецимо да желите анимирати зелено правоугаоно дугме тако што ћете га претворити у плаво округло дугме.

У оквиру параметара фром горњи део мораћете да поставите све потребне стилове да би елемент изгледао као зелено правоугаоно дугме, а затим у до одељак, поставићете све захтеве за обликовање како бисте ово дугме претворили у плаво округло дугме.



Ако размишљате, то не звучи превише као анимација. Па, то је зато што кључна компонента целог овог процеса тек треба да се уведе --- ова компонента је својство анимације.

Својство анимације

Тхе својство анимације има скуп различитих под-својстава; они се користе у комбинацији са горњом структуром кључних кадрова за анимацију жељеног ХТМЛ елемента.



Међутим, потребно је само да знате пет ових под-својстава и вредности које су са њима повезане да бисте постигли анимацију у својим пројектима. Ова својства су позната као:

  • Назив анимације
  • Анимација-трајање
  • Функција анимације-времена
  • Анимација-кашњење
  • Аниматион-итератион-цоунт

Коришћење анимације на веб страници

Користећи горњи сценарио, циљ је стварање анимираног дугмета.

Пример анимације дугмета







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Одељак анимације горњег кода садржи пет под-својстава која су раније поменута. Свако својство има врло различиту функцију и заједно раде на томе да анимирају сваки ХТМЛ елемент за који су циљани.

Повезано: Како циљати део веб странице помоћу ЦСС селектора

Својство имена анимације

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

Ако сте заборавили укључити једно или два друга под-својства, можда ћете и даље имати прилично пристојну анимацију. Међутим, ако сте заборавили име својства анимације не бисте имали анимацију.

Својство трајања анимације

Ово својство се користи за дефинисање времена које анимирани елемент треба да прође при преласку из једног стања у друго.

У горњем примеру, својство трајања анимације је подешено на 5 секунди (5с), па ће зелено правоугаоно дугме имати укупно 5 секунди пре него што потпуно постане плаво округло дугме.

Својство кашњења анимације

Ово својство је важно из једног разлога; неким веб страницама може бити потребно неколико секунди да се потпуно учитају (због неколико различитих фактора). Дакле, својство кашњења анимације спречава одмах покретање анимације у случају да веб страници треба неко време да се учита.

У горњем примеру, својство кашњења анимације је подешено на 4с, што значи да анимација неће почети све до 4 секунде након посете веб странице (дајући веб страници довољно времена да се учита пре почетка анимације).

Својство броја анимације-итерације-броја

Ово својство наводи колико пута би анимирани елемент требао прећи из једног стања у друго. Тхе својство анимације-итерације-броја узима вредности које су речи и бројеви. Вредност броја може бити било шта од 1 навише, док је вредност речи обично бесконачан .

У горњем примеру, вредност анимације-итерације-броја је подешен на бесконачан , што значи да ће, све док је веб страница горе, својство дугмета непрестано анимирати из једног стања у друго.

Својство функције анимације-времена

Ово својство диктира кретање анимираног елемента при преласку из једног стања у друго. Тхе својство функције анимације-времена-функције се обично додељује једна од три вредности лакоће.

  • Једноставност употребе
  • Лакоћа
  • Лако увлачење

Тхе вредност олакшања у излазу се користи горе; ово полако прелази анимацију из једног стања у друго. Ако је циљ створити спор прелаз када се дугме трансформише из зеленог правоугаоника у плави круг, користили бисте лакоћа у вредности . Да желите само спори прелаз у супротном смеру, користили бисте вредност олакшања .

Смањивање нашег кодекса

У већини случајева, смањење дужине програма сматра се практичним приступом. То је углавном зато што мањи број кодова смањује вероватноћу да грешке остану незапажене у вашим програмима.

Горњи код се може смањити за четири реда. Ово се може постићи једноставним коришћењем својства анимације без експлицитне идентификације сваког од његових под-својстава.

Смањивање кода за пример анимације дугмета







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}