Duration transition css: transition-duration — CSS: Cascading Style Sheets

css властивість transition-duration

• Головна
• css
• властивості
• transition-duration

Властивість transition-duration задає час, в секундах або мілісекундах, за скільки часу повинна відпрацювати анімація переходу. Без задання значення дорівнює 0s, це означає, що ніякої анімації немає, перехід відбувається миттєво.

Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property. Змінюючи значення задане для цієї властивості, Ви налаштовуєте швидкість демонстрації ефекту. Більші значення роблять анімацію більш плавною, менші — роблять її швидшою.

Ви можете задавати декілька значень відразу відділивши їх комами. В цьому випадку, кожне значення буде застосоване для окремої властивості, описаної у transition-property. Якщо значень для transition-duration задано більше, ніж для transition-property, список просто обрізається з правої сторони (прибираються зайві значення).

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

transition-duration: time|initial|inherit;

Властивість transition-duration може отримувати 3 значення:

time

Тривалість переходу (в секундах чи мілісекундах).

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:	0s
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object. style.transitionDuration=»1s»

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

Як різні значення впливають на елементи

Простий приклад роботи властивості
Завдання тривалість ефекту переходу — 5 секунд.
 
div { 


  -webkit-transition-duration: 5s; /* Safari */ 


  transition-duration: 5s; 


}
Додаткові посилання
transition
transition-property
transition-timing-function
transition-delay
transition — Справочник CSS
schoolsw3.com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ Назад
CSS Справочник
Далее ❯

Пример
Наведите указатель мыши на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:
 div
{
  width: 100px;
  transition: width 2s;
}
div:hover {
  width: 300px;
}
Редактор кода »
Определение и использование
Свойство transition — это сокращенное свойство для:
transition-property
transition-duration
transition-timing-function
transition-delay
Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0s, и переход не будет иметь никакого эффекта.
 
Значение по умолчанию:
all 0s ease 0s
Унаследованный:
нет
Анимируемый:
нет Прочитайте о animatable
Версия:
CSS3
JavaScript синтаксис:
object.style.transition=»all 2s»
Попробовать
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.
Свойство
transition
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
 10.5 -o-
CSS Синтаксис
transition: property duration timing-function delay|initial|inherit;
Значение свойств
Значение
Описание
transition-property
Задает имя свойства CSS, для которого предназначен эффект перехода
transition-duration
Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода
transition-timing-function
Задает кривую скорости эффекта перехода
transition-delay
Определяет, когда начнется эффект перехода
initial
Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit
Наследует это свойство от родительского элемента. Прочитайте о inherit
Примеры
Пример
Когда <input type=»text»> получает фокус, постепенно изменится ширина от 100px до 250px:
 
 
 input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Переходы
HTML DOM Справочник: Свойство transition
❮ Назад
CSS Справочник
Далее ❯
ВЫБОР ЦВЕТА
 
ТОП Учебники
 
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
 
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3. CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
 jQuery Справочник
ТОП Примеры
 
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум |
О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять 
Условия к использованию, 
Cookies и политика конфиденциальности.
 
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
 CSS transition-duration Свойство 
 ❮ Предыдущий
Полное руководство по CSS
Далее ❯
 
 Пример 
 Пусть эффект перехода
длиться 5 секунд:
 div { 
   transition-duration: 5s; 
 } 
 Попробуйте сами »
 Определение и использование 
 Свойство  transition-duration  указывает, сколько секунд (с) или миллисекунд
(мс) а
эффект перехода занимает завершение.
 Значение по умолчанию:
 0 с
 Унаследовано:
 нет
 Анимация:
 нет. Читать о  анимированном 
 Версия:
 CSS3
 Синтаксис JavaScript:
  объект  .style.transitionDuration=»1s»
Попробуй
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
  
 Числа, за которыми следует -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
 Собственность
 продолжительность перехода
 26.0 
 4.0 -вебкит-
 10,0
 16,0 
 4,0 -моз-
 6.1 
 3.1 -вебкит-
 12,1 
 10,5 -о-
 Синтаксис CSS 
 длительность перехода:  время  |начальный|наследовать;
 Значения свойств 
 
 Значение
 Описание
  время 
 Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода. Значение по умолчанию — 0 с, что означает отсутствие эффекта
 начальный
 Устанавливает для этого свойства значение по умолчанию. Читать про  начальный 
 унаследовать
 Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Связанные страницы 
 Учебник по CSS: CSS-переходы
 Ссылка на HTML DOM: свойство transitionDuration
 ❮ Предыдущая
Полное руководство по CSS
Следующий ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 How To Tutorial 
 SQL Tutorial 
 Python Tutorial 
 W3.CSS Tutorial 
 Bootstrap Tutorial 
 PHP Tutorial 
 Java Tutorial 
 C++ Tutorial 
 jQuery Tutorial 
 Top References 
 HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
 Лучшие примеры 
 Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3. CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 УСС | Свойство transition-duration — GeeksforGeeks 
 Улучшить статью
 Сохранить статью
 Последнее обновление:
01 авг, 2022
 Читать
 Обсудить
 Улучшить статью
 Сохранить статью
 Свойство transition-duration в CSS используется для указания продолжительности времени (в секундах или миллисекундах) для завершения эффекта перехода.
  Синтаксис: 
 продолжительность перехода: время|начальное|наследовать; 
  Значения свойств: 
  time:  Используется для указания продолжительности времени (в секундах или миллисекундах) для завершения анимации перехода.
  Синтаксис: 
 продолжительность перехода: время; 
  Пример:   
 HTML 
   
  <   html   > 
         <   head   > 
             <   title   > 
                 CSS transition-duration Property 
      название   > 
             
             < 0020 стиль   > 
                 div { 
                    ширина: 
                     высота: 70 пикселей; 
                     фон: зеленый; 
                     свойство перехода: ширина; 
                     продолжительность перехода: 5 с; 
                     
                     /* Для браузера Firefox */ 
                    -webkit-transition-property; 
                     -webkit-transition-duration: 5s; 
                     задержка перехода: . 2 с; 
                     дисплей: встроенный блок; 
                 } 
                 
                div:hover { 
                              :  ширина; 
                 } 
               style   > 
           head   > 
         
         <   body   стиль = "выравнивание текста: центр;"> 
             
             <   h2   >GeeksforGeeks  h2   > 
             
             <   h3   >Transition Property  h3   > 
             
             <   дел  
10020                <   p   >transition-duration: 5s  p   > 
               div   > 
           body   > 
    HTML  > 
  Выход: 
 Перед переходом:
 0003
  
 После перехода:
  
  начальное значение:  Используется для установки свойства transition-duration в значение по умолчанию. По умолчанию значение transition-duration равно 0. 
  Синтаксис: 
 transition-duration: initial; 
  Пример: 
 HTML 
   
  <  HTML 202020202020202020202.2121112111211114 .0003
    <  HEAD  > 
    <  Название  > 
    CSS TRANSTION 
             
             <   стиль   > 
 9 0 
   div { 
                     ширина: 100 пикселей; 
                     высота: 80 пикселей; 
                     фон: зеленый; 
                     свойство перехода: ширина; 
                     длительность перехода: начальная; 
                    
                     /* Для браузера Firefox */ 
                     -webkit-transition-property: width; 
                     -webkit-transition-duration: initial; 
                     задержка перехода: . 2 с; 
                     дисплей: встроенный блок; 
                } 
                 
               div:hover { 
                     ширина: 300 пикселей; 
                 } 
               style   > 
           head   > 
         
         <   body   style = "text-align:center;"> 
             
             <   h2   >GeeksforGeeks  h2   > 
             
             <   h3   >Transition Property  h3   > 
  
    <  Div  > 
    <  p   >transition-duration: initial;  p   > 
               div   > 
           body   > 
    HTML  > 
  Выход: 
 Перед переходом:
 После перехода:
  
  наследовать:  Значение свойства transition-duration, установленное от его родителя.
  Синтаксис: 
 продолжительность перехода: наследовать; 
  Example 3:  
 HTML 
   
  <   html   > 
         <   head   > 
             <   title   > 
                 CSS transition-duration Property 
               title   > 
             
             <   стиль   > 
                div { 
                     ширина: 100 пикселей; 
                     высота: 270 пикселей; 
                     фон: зеленый; 
                     свойство перехода: ширина; 
                     transition-duration: inherit; 
                     функция времени перехода: облегчение; 
                                    задержка перехода: . 2 с; 
                     дисплей: встроенный блок; 
   } 
  
    Div: Hover {
    ширина: 500px; 
                 } 
               стиль   > 0003
      HEAD  > 
  
    <  Body   Стиль = ". <  H2  > Geeksforgeeks   H2  > 
  
    < 
   < 0020 h3   >Transition Property  h3   > 
             
             <   div   > 
                 <   p   >transition-duration: inherit   p   > 
               дел   > 
  body   > 
    html   >                    
  Output:  
 Before Transition:
  
 After Transition:
  
  Supported Browsers:  Браузер, поддерживаемый свойством  перехода , перечислены ниже:
 Chrome 26.