SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили: • selectors • markdown • nano • top • gsmartcontrol
css:transition

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
css:transition [2022/05/15 16:29] – создано so_v_acss:transition [2026/08/06 09:37] (текущий) – so_v_a
Строка 1: Строка 1:
-# CSS свойство Animation+<!DOCTYPE markdown> 
 + 
 +# CSS свойство transition 
 + 
 +Универсальное свойство, которое позволяет одновременно задать значения 
 + 
 +- **transition-property**, 
 +- **transition-duration**, 
 +- **transition-timing-function**, 
 +- **transition-delay**. 
 + 
 +**Устанавливает эффект перехода между двумя состояниями элемента**, они могут быть определены с помощью псевдокласса **:hover** или **:active**, а также динамически через JavaScript. 
 + 
 +Значение по умолчанию
  
-## Синтаксис 
 ``` ```
-animation: animation-duration || animation-timing-function ||  +all 0s ease 0s
-  animation-delay || animation-iteration-count || animation-direction ||  +
-  animation-fill-mode || animation-play-state || [none | animation-name]+
 ``` ```
  
-## Значения +Синтаксис 
-Любые комбинации значений, разделяемых между собой пробелом, определяющих параметры анимации.+
  
-Значение по умолчанию : +``` 
--   animation-name: none +transition: <переход> [, <переход> ]* 
--   [animation-duration] (#animation-duration): 0s +```
--   animation-timing-function: ease +
--   animation-delay: 0s +
--   animation-iteration-count: 1 +
--   animation-direction: normal +
--   animation-fill-mode: none +
--   animation-play-state: running+
  
-### animation-duration +Здесь: 
-Задаёт время в секундах или миллисекундах, **сколько должен длиться один цикл анимации**. По умолчанию значение равно 0s, это означает, что никакой анимации нет. + 
-Можно указать несколько значений, перечисляя их через запятую. Отрицательные значения и значения без указания единиц времени (s или ms) недопустимы и будут игнорироваться.+``` 
 +<переход> = [ none | <transition-property> ] || <transition-duration> ||   <transition-timing-function> || <transition-delay>  
 +``` 
 + 
 +## transition-property 
 + 
 +Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
  
-### animation-timing-function 
-Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. 
 Синтаксис Синтаксис
 +
 ``` ```
-animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear |  +transition-property: none | all | <свойство> [,<свойство>]*
-     step-start | step-end | steps | cubic-bezier+
 ``` ```
 +Значения
 +
 +- **none** - Никакое свойство не задано.
 +- **all** - Все свойства будут отслеживаться.
 +- **<свойство>** - Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
 +
 +## transition-duration
 +
 +Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.
 +По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
 +
 +Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через **transition-property**.
 +
 +Синтаксис
 +
 +```
 +transition-duration: <время> [,<время>]*
 +```
 +
 +## transition-timing-function
 +
 +Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.
 +
 +**transition-timing-function** представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через **transition-property** значение свойства.
 +Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону.
 +
 +Синтаксис
 +
 +```
 +transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier
 +```
 +
 +Значения
 +
 - **ease** - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1). - **ease** - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
-- **ease-in** -  Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).+- **ease-in** - Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
 - **ease-out** - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1). - **ease-out** - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
 - **ease-in-out** - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1). - **ease-in-out** - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
Строка 39: Строка 80:
 - **step-start** - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение. - **step-start** - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
 - **step-end** - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение. - **step-end** - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
-- **steps** - Ступенчатая функция, имеющая заданное число шагов.  +- **steps** - Ступенчатая функция, имеющая заданное число шагов.
- `animation-timing-function: steps(<число>, start | end)` +
- Здесь: <число> — целое число больше нуля; start — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); end — задаёт полунепрерывную сверху функцию. +
-- **cubic-bezier** - Задаёт функцию движения в виде [кривой Безье](http://ru.wikipedia.org/wiki/Кривая_Безье).+
  
-### animation-delay +``` 
-Устанавливает **время ожидания перед запуском** цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. +transition-timing-function: steps(<число>, start | end) 
-Допустимо указывать несколько значений, перечисляя их через запятую.+``` 
 +  
 +Здесь: 
 + 
 +**<число>** — целое число больше нуля   
 +**start** — задаёт полунепрерывную снизу функцию   
 +**end** — задаёт полунепрерывную сверху функцию   
 +**cubic-bezier** - Задаёт функцию движения в виде кривой Безье. 
 + 
 +## transition-delay 
 + 
 +Свойство **transition-delay** устанавливает время ожидания перед запуском эффекта перехода.   
 +Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. 
 + 
 +Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах **transition-property**. 
 + 
 +Синтаксис 
 + 
 +``` 
 +transition-delay: <время> [,<время>]* 
 +```
  
/var/www/html/dokuwiki/data/attic/css/transition.1652632186.txt.gz · Последнее изменение: (внешнее изменение)