CSS Transitions: описание, свойства и функции за използване

Създаването на добър уеб сайт днес е просто: има достатъчно специалисти, процесите за подобряване на функционалността и нейното представяне (структура и съдържание) активно се развиват. Последното е дизайнът на средствата на CSS - като най-простото, рентабилно и ефективно решение.

Борбата между разработчиците за клиента и собствениците на сайтове за интереса на посетителите и посещаемостта на ресурсите се премести в сферата на тънкото рекламиране и мекото (топло и динамично) съдържание.

CSS Jump Place

в псевдокласе :hover и обратно. Според текущото мнение, мястото на CSS Transitions в псевдокласата: hover и back. Има стил на етикет, например TagStyle, и има стил TagStyle: hover. Задачата на псевдокласата е да постави съдържанието на всички правила от второто описание в първата, веднага щом мишката е над етикета и веднага щом я напусне, върнете всичко обратно.

В такава схема (в класическата версия) цветовете на фона, цветовете на текста, рамката, нейните извивки, отстъпи и други видими елементи обикновено се променят. позволяет это сделать плавно и управлять плавностью. Използването на правилото CSS Transitions ви позволява да направите това гладко и да контролирате гладкостта.

Правилото може да промени много други елементи, но обикновено се използват посочените. CSS, можно найти на официальных ресурсах в интернете. Пълният списък с правила, които са засегнати от Свойството на Прехода CSS, може да бъде намерен на официални ресурси в Интернет.

Съдържание на преходното правило

s включает в себя (transition='*'): Задачата на правилото: да извърши плавен преход на други правила от едно състояние в друго, следователно CSS Transition s включва (transition = '*'):

• име на имота, който е засегнат (* - собственост);
• продължителност на процеса (* - продължителност);
• преходна функция (* -тиминг-функция);
• забавяне стартиране на процеса (* -закъснение).

Разрешено е да напиша кратко правило относно каноните на CSS:

• 1 s ease .5 s ; преход: 1 s лесно .5 s ;

Преходът се отнася за всички правила, изпълнявани за една секунда в "лесен" стил с половин секунда закъснение. Все пак, написани от елементи на правилото:

• * - собственост: всички;
• * - продължителност: 1s;
• * -функция за време: лекота;
• * -закъснение: .5s;

поддерживается основными браузерами, но никогда не помешает убедиться в этом и в наличии кроссбраузерности записанных правил. Правилото за преход се поддържа от главните браузъри, но никога не вреди, за да се уверите в това и в съвместимостта на писмени правила с всички браузъри.

Класическо приложение

: background: Най-простият и най-често използван е преходът на цвета на фона (символ): CSS Transition : background:

В този пример само правило за преход ще бъде приложено към правилото за цвета на фона (продължителност 2 секунди, функцията за освобождаване, забавяне 0.2 секунди), а другите правила ще преминат в друго състояние незабавно.

Функция за преход (стил)

- функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Важна част от правилото за CSS преходи е преходната функция, т.е. кривата на времето, как да извършим прехода от едно състояние към друго. Гладката опция (easy) е по подразбиране: преходът започва бавно, ускорява се и се забавя в края.

Стойността на „линейния“ определя единния преход: „easy-in“ - бавно започва прехода, след това постепенно се ускорява до края и „улеснява“ - действа обратното.

Функцията кубична-безие (x1, y1, x2, y2) ви позволява да създадете своя собствена опция за преход, но използването на официални ресурси и сайтове с добър опит, използвайки кривата на Безие, е все още предпочитано. Нещо ново, което да излезе със сигурност няма да проработи, но опитът на приятен за окото и психологията на посетителя на опциите е натрупан, въпреки това, значителен.

Конверсията се смесва с реализация

& Transform. Комбинацията от правилата на CSS Transition & Transform дава добър ефект. Първият определя времето на процеса, второто показва какво да прави през цялото това време.

Трансформациите ви позволяват да премествате тагове, да ги въртите, да ги преоразмерявате, да променяте позицията. Помислете за комбинацията:

• ( 180 deg ); преобразуване: завъртане ( 180 градуса );
  • 2 s ease-out .2 s ; преход: всички 2 сек .

В продължение на две секунди тя ще превърне съдържанието на маркера на 180 градуса. Експериментирайки с функциите на translate, scale, rotate, skew и техните вариации, можете да постигнете интересни ефекти и да дадете на вашата работа уникална оригиналност.

позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели. CSS3 също ви позволява да преобразувате 3d, т.е. да премествате етикета в xyz координати, което, в комбинация с CSS Transitions, ви позволява да завъртате текстове и форми, както е необходимо за постигане на целта.

Съвместим с правилото за преход

для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого. Ако използването на CSS Transitions за фон, граница, цвят и други очевидно визуални правила е нормално, естествено и удобно, то в някои случаи, например, опитвайки се да комбинирате CSS Transition & Display, можете просто да прекарвате време и да не постигате това, което искате.

Най-общо казано, когато се планира използването на визуални ефекти, се препоръчва да се разграничи "видим от оформлението". За да направите красива ротация на форма или текст за определено време - действие, което има малко общо с дисплея, видимостта, свойствата на z-индекса. , то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое. Обаче, ако последните две са ясно описани в списъка с правила, с които се свързва CSS Transition , първото не се споменава, въпреки че неговото използване въвежда нещо забележимо, но слабо контролирано, към етикета.

Правилото за преход не е само: hover и обратното, то може да бъде успешно приложено и към други псевдокласове, например: focus или: active.

Като цяло, Transition и Transform са CSS функции, които логично не са пряко свързани с него (става въпрос само за стилове, а не за алгоритми). Но през последните няколко години акцентите се изместиха толкова много, че да не се използва богатият арсенал от CSS и CSS3 е просто недостъпен лукс.

За ненормално и естествено

В зората на персоналните компютри, когато беше създаден математически процесор за математически изчисления, беше необичайно да имаме 386-ти компютър без математически съпроцесор, когато ставаше въпрос за ефективно използване на програмата Fortran за изчисляване на пътя до Луната. Естествено, днес не става въпрос за никой, който купува компютър, да пита дали разполага с хардуерни средства за математически изчисления.

Без съмнение, алгоритъмът за изчисляване на времето на преход от един стил към друг или въртенето на етикет около друг маркер има много малка връзка с идеите за стиловете. Тагът не е електрон, който да се върти близо до атом.

И CSS - по дефиниция, таблица на каскадни стилове, и с моментите на наследяване, като се вземат предвид мобилните устройства, с приоритети, комбинации.

Но светът се променя толкова бързо. Днес не можете да наричате различна формула математика, защото понятието за число в модерен език за програмиране не се различава много от концепцията за низ.

Но ако това е подходящо за всички, ако е удобно и ефективно, тогава може би има смисъл да промените собствените си идеи. & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Очевидно е, че CSS Transition & Transform ще направи такава малка революция: няма нужда да програмирате нещо, което вече не се нуждае от нея. Програмистите от дълго време страдат от болестта на професията, която се различава по следния начин: да пренапише не само това, което другите правят преди тях за следващата задача, но дори и това, което самите те са направили вчера. Какво да правим, светът и технологиите са променливи, а дори и малките метаморфози в областта на приложение понякога водят до необходимостта от значителни промени в кодовете.

Въпреки това, такова преобразуване на математически алгоритми в красиви и удобни CSS правила е много практично и ефективно.