Прелази су основни облик ЦСС анимације који можете користити за креирање прелепих ефеката.

Кључне Такеаваис

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

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

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

Разумевање ЦСС транзиција

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

Прелаз се дешава као одговор на догађај окидача, као што је прелазак миша преко дугмета. На пример, када пређете курсором преко дугмета, ЦСС прелаз може променити боју позадине из једног стања (почетно) у друго (коначно). Овај прелаз се дешава током трајања које одредите, стварајући визуелно привлачан ефекат.

Транситион Пропертиес

Без обзира на ефекат који покушавате да створите, морате да разумете својства прелаза која су доступна. Можете их користити за фино подешавање понашања ваших прелаза.

прелаз-својство

Ово својство одређује које ће ЦСС својство (или својства) бити подвргнуто ефекту транзиције. Можете да наведете више својстава, одвојених зарезима, да бисте прешли истовремено. Укључите специфично име својства да би се само то својство променило током транзиције. Или користите кључну реч све да бисте пренели сва ЦСС својства која подржавају прелазак.

Ево синтаксе:

transition-property: property1, property2, ...;

прелаз-трајање

Ово својство поставља трајање ефекта прелаза, одређујући колико дуго треба да траје анимација да се заврши. Одредите вредност користећи секунде (с) или милисекунде (мс), на пример 0.5с или 300мс. Ово је синтакса:

transition-duration: time;

прелазна-временска-функција

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

  • ублажити, лакоца: Споро почетак, затим брз, па спор крај (подразумевано).
  • линеарни: Константа брзина.
  • еасе-ин: Споро почетак.
  • еасе-оут: Споро крај.
  • лакоћа уласка: Споро почетак и крај.

Ево синтаксе:

transition-timing-function: timing-function;

прелаз-кашњење

Ово својство уводи одлагање пре почетка транзиције. Можете одредити вредност у секундама (с) или милисекундама (мс). Синтакса је:

transition-delay: time;

Ова својства заједно контролишу како се транзиција понаша, укључујући која својства анимирају и тачно како се понаша време анимације.

Почетак рада са једноставним прелазима

Разумевање својстава ЦСС прелаза је једна ствар, али како она функционишу у пракси? Ево неколико корака које треба следити кад год желите да стилизујете елемент користећи прелазе.

1. Изаберите свој ХТМЛ елемент

Изаберите ХТМЛ елемент на који желите да примените прелаз. Ово може бити дугме, веза, слика или било који други елемент коме желите да додате интерактивни ефекат.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Ова ознака ће вам дати основно, подразумевано дугме за почетак рада:

2. Идентификујте својство за транзицију и дефинишите почетно стање

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

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Ваше дугме ће сада имати неке стилове са којима можете да вежбате прелаз:

3. Наведите стање лебдења

Направите ЦСС правило које се примењује када пређете курсором преко елемента. У оквиру овог правила промените ЦСС својство које сте идентификовали у другом кораку у његово коначно стање.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Примените својства прелаза

Користити прелаз-својство, прелаз-трајање, и прелазна-временска-функција својства за навођење детаља прелаза.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

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

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

Најбоље праксе и савети за почетнике

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

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

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

Компатибилност са различитим претраживачима

Компатибилност унакрсних претраживача је кључна ствар када радите са ЦСС прелазима како бисте осигурали да ваше анимације и интеракције раде доследно у различитим веб прегледачима. Ево неколико најбољих пракси и савета за постизање компатибилности између прегледача са ЦСС прелазима:

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

Праћење ових пракси вам омогућава да креирате ЦСС прелазе који раде глатко и доследно у различитим прегледачима.

Наставите да вежбате са ЦСС транзицијама

Будите у току са најновијим трендовима у развоју веба и најбољим праксама у ЦСС транзицијама. Слободно експериментишите са различитим својствима и вредностима прелаза да бисте постигли јединствене ефекте. Учење често укључује покушаје и грешке, па понављајте и прилагођавајте своје прелазе током времена.