path: root/files/bg/web/css/transition-delay/index.html

---
title: transition-delay
slug: Web/CSS/transition-delay
tags:
  - CSS
  - CSS преходи
  - CSS свойство
  - Справка
translation_of: Web/CSS/transition-delay
---
<div>{{CSSRef}}</div>

<p>СSS sвойството  <strong><code>transition-delay</code></strong> определя колко време трябва да се изчака преди да започне <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">ефекта на прехода</a> за промянана стойността на зададеното свойство.</p>

<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div>

<p class="hidden">Източникът на този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивните примери, моля клонирайте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете заявка за pull.</p>

<p>Забавянето може да е нула, положително или отрицателно:</p>

<ul>
 <li>Стойност <code>0s</code> (или <code>0ms</code>) ще инициира незабавно преходния ефект.</li>
 <li>Положителна стойност ще забави началото на преходния ефект със съотвеното време.</li>
 <li>Отрицателна стойност ще инициира преходния ефект незабавно, като самият ефект ще стартира със съответния междинен момент. Т.е.м ефектът ще бъде анимиран, сякаш той вече тече толкова време.</li>
</ul>

<p>Можете да зададете множество отлагания, което се употребява при преходи на на няколко свойства. Всяко отлагане ще бъде приложено към съответното свойство, така както са упоменати в списъка {{cssxref("transition-property")}}, който пък списък има приоритет и се води главен списък. Ако има по-малко на брой отлагания, отколкото свойства в главния списък, то списъкът с отлаганията ще бъде повтарян докато не се изравни по членове с главния. Ако пък има повече отлагания, отколкото свойства в главния списък, то списъкът със забавянията ще бъде отрязан до толкова, колкото да съответства на главния. И в двата случая  CSS декларирането си остава валидно.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css no-line-numbers">/* &lt;time&gt; values */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
</pre>

<h3 id="Стойности">Стойности</h3>

<dl>
 <dt>{{cssxref("&lt;time&gt;")}}</dt>
 <dd>Отнася се до времето, което се ичаква между старта на преходния ефект и промяната на стойността на свойството.</dd>
</dl>

<h3 id="Официален_синтаксис">Официален синтаксис</h3>

{{csssyntax}}

<h2 id="Примери">Примери</h2>

<div>
<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
<p><code>transition-delay: 0.5s</code></p>

<div class="hidden">
<pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

<pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
</pre>

<pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
</div>

<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
</div>

<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
<p><code>transition-delay: 1s</code></p>

<div class="hidden">
<pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

<pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
</pre>

<pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
</div>

<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
</div>

<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
<p><code>transition-delay: 2s</code></p>

<div class="hidden">
<pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

<pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
</pre>

<pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
</div>

<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
</div>

<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
<p><code>transition-delay: 4s</code></p>

<div class="hidden">
<pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

<pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
</pre>

<pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
</div>

<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
</div>
</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статут</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Първоначална дефиниция</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2>

<div class="hidden">Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако желает еда допринесете към данните, моля отидете на  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и ни изпратете заявка за pull.</div>

<p>{{Compat("css.properties.transition-delay")}}</p>

<h2 id="Вижте_същo">Вижте същo</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Изплозване на CSS преходи</a></li>
 <li>{{domxref("TransitionEvent")}} API</li>
</ul>