diff options
Diffstat (limited to 'files/bg/web/css/transition-delay/index.html')
| -rw-r--r-- | files/bg/web/css/transition-delay/index.html | 356 |
1 files changed, 0 insertions, 356 deletions
diff --git a/files/bg/web/css/transition-delay/index.html b/files/bg/web/css/transition-delay/index.html deleted file mode 100644 index 8f574658ee..0000000000 --- a/files/bg/web/css/transition-delay/index.html +++ /dev/null @@ -1,356 +0,0 @@ ---- -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">/* <time> 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("<time>")}}</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"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </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"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </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"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </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"> <div class="parent"> - <div class="box">Lorem</div> -</div> - </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> |