remove retired locales (#699)

2 files changed, 0 insertions, 1275 deletions

diff --git a/files/bg/web/css/css_transitions/index.html b/files/bg/web/css/css_transitions/index.html
deleted file mode 100644
index afbb21c6e6..0000000000
--- a/files/bg/web/css/css_transitions/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: CSS Transitions
-slug: Web/CSS/CSS_Transitions
-tags:
-  - CSS
-  - Преглед
-  - Преход
-  - Справка
-  - Транзишън
-translation_of: Web/CSS/CSS_Transitions
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Преходите </strong> са модул от CSS, който ви позволява да създавате плавни преходи между стойностите на свойствата в CSS. Поведението на тези преходи може да бъде контролирано чрез уточняване на тяхната функция, продължителност и редица други атрибути.</p>
-
-<h2 id="Справка">Справка</h2>
-
-<h3 id="Свойства">Свойства</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("transition")}}</li>
- <li>{{cssxref("transition-delay")}}</li>
- <li>{{cssxref("transition-duration")}}</li>
- <li>{{cssxref("transition-property")}}</li>
- <li>{{cssxref("transition-timing-function")}}</li>
-</ul>
-</div>
-
-<h2 id="Наръчници">Наръчници</h2>
-
-<dl>
- <dt><a href="/bg/docs/Web/Guide/CSS/Using_CSS_transitions">Използване на CSS преходи</a></dt>
- <dd>Ръководство как стъпка-по-стъпка да създадете преход в CSS. Статията описва всички важни CSS свойства и обяснява как те си взаимодействат.</dd>
-</dl>
-
-<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')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Първоначална дефиниция.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0 {{property_prefix("-webkit")}}<br>
-    26.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}</td>
-   <td>10.0</td>
-   <td>11.6 {{property_prefix("-o")}}<br>
-    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
-   <td>3.0 {{property_prefix("-webkit")}}<br>
-    6.1</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.1 {{property_prefix("-webkit")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoMobile("16.0")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>10.0 {{property_prefix("-o")}}<br>
-    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
-   <td>3.2 {{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Вижте_също">Вижте също</h2>
-
-<ul>
- <li>Свързаните с CSS Преходи, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимации</a>  осигуряват още по-фин контрол върху анимираните свойства.</li>
-</ul>
diff --git a/files/bg/web/css/css_transitions/using_css_transitions/index.html b/files/bg/web/css/css_transitions/using_css_transitions/index.html
deleted file mode 100644
index e379879a8e..0000000000
--- a/files/bg/web/css/css_transitions/using_css_transitions/index.html
+++ /dev/null
@@ -1,1155 +0,0 @@
----
-title: Използване на CSS преходи
-slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
-tags:
-  - CSS
-  - CSS преходи
-  - Напреднали
-  - Преходи
-  - наръчник
-translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
----
-<p>{{CSSref}}</p>
-
-<p><span class="seoSummary"><strong>CSS преходите</strong> предоставят способ за контролиране на скоростта на анимацията при промяна на CSS свойствата. По този начин, вместо промяната в свойството да се приложи незабавно, бихме могли да предизвикаме промната да се случи за определен период от време.</span> Например, ако сменяте цвета на елемента от бял на черен, обикновено това става мигновено. С активиран CSS преход, промените настъпват на определени интерали които съответстват на скоростта и могат да бъдат персонализирани.</p>
-
-<p>Анимации, които включват преходи между две състояния, могат да бъдат наречени безусловни, тъй като състоянията между началното и крайното са определени от самия бразър.</p>
-
-<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
-
-<p>CSS преходите позволяват да изберете кои свойства да анимирате (като  <em>ги посочите изрично</em>), кога да започне анимацията ( като зададете <em>отложено начало)</em>,колко продължителен ще е самият преход (като зададете <em>продължителност</em>) или как да бъде изпълнен прехода (като се определи <em>времевата функция</em>, т.е. линейно или бързо в началото и със забавяне в края).</p>
-
-<h2 id="Кое_CSS_свойство_може_да_бъде_преходно">Кое CSS свойство може да бъде преходно?</h2>
-
-<p>Авторът може да определи кои свойства на своето уеб творение да анимира и по какъв  начин. Това дава поле за създаване на сложни преходи. Поради това, че няма смисъл в анимирането на някои свойства, <a href="/en-US/docs/Web/CSS/CSS_animated_properties">списъкът със свoйства, подходящи за анимиране </a> е ограничен до определен брой.</p>
-
-<div class="note">Бележка: Наборът от елементи, подходящи за анимиране, се променя в зависимост от разработването на спецификациите.</div>
-
-<p class="note">Стойността <code>auto</code>  е в повечето слуаи доста сложен случай. Спецификаците препоръчват да не се изпълняват анимации от или към стойност <code>auto</code>. Някои потребителски агенти, като тези произхождащи от Gecko, следват тези изисквания, докато други, базирани на WebKit, не са толкова стриктни. Използване на анимации с <code>auto</code>  може да доведе до непредвидими резултати, зависещи от браузера и неговата версия, поради това трябва да бъдат избягвани.</p>
-
-<h2 id="Задаване_на_преходи">Задаване на преходи</h2>
-
-<p>CSS преходите се контролират чрез свойството<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}} . Това е и най-правилният начин за тяхното конфигуриране. Той помага да се преодолее фактът, че списъците с параметрите са несинхронни, а продължителното дебъгване на CSS  може да бъде доста неприятно.</p>
-
-<p>Можете да контролирате  отделните компоненти на прехода чрез следните свойства:</p>
-
-<p><strong>(Забележете, че тези преходи се въртят в цикъл непрекъснато само за цел да покажем пример, CSS <code>преходите</code> само визуализират промяна на някое свойство от дедено начало до определен край. Ако се нуждаете от визуализиране на цикъл, погледнете в свойството на CSS <a href="/en-US/docs/CSS/animation"><code>анимация</code></a>.)</strong></p>
-
-<dl>
- <dt>{{cssxref("transition-property")}}</dt>
- <dd>Задава името или имената на свойствата, върху които трябва да бъде проложен преход. Само свойствата, които са изброени тук, биват анимирани по време на преходите, промените по другите свойства настъпват незабавно- както е по подразбиране.</dd>
- <dt>{{cssxref("transition-duration")}}</dt>
- <dd>Задава продължитеността за която трябва да настъпо промяната. Можете да зададете една профължителност, която да важи за всички свойства по време на прехода или различни такива, които позволяват всяко свойство да се променя за различен период от време.
- <div>
- <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-duration: 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 transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    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 transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transformv color;
-    transition-duration: 0.5s;
-    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("duration_0_5s", 275, 150)}}</div>
- </div>
-
- <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-duration: 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 -webkit-transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform color;
-    transition-duration: 1s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    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 -webkit-transform transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 1s;
-    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("duration_1s",275,150)}}</div>
- </div>
-
- <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-duration: 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 transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    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 transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    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("duration_2s",275,150)}}</div>
- </div>
-
- <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-duration: 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 transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 4s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    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 transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 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("duration_4s",275,150)}}</div>
- </div>
- </div>
- </dd>
- <dt>{{cssxref("transition-timing-function")}}</dt>
- <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Задава функцията, зависеща от времето, по която  свойствата да бъдат изчислени за междинните точки на прехода.Тази функция се нарича <em>времева функция </em>и калкулира стойностите на свойствата за тези междинни точки. Повече <a href="/en-US/docs/CSS/timing-function">времеви функции</a> могат да бъдат зададени чрез предоставяне на графика на съответната функция. Тя трябва да се състои от четири точки, които да дефинират кубична крива на Безие ( две крайни и двете междинни, които лесно управляват формата на кривата).  Можете да изберете колко плавно (easing) ще се извърши прехода от <a href="http://easings.net/">този помощен сайт</a> .
- <div class="cleared">
- <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-timing-function: ease </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-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-.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-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-</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("ttf_ease",275,150)}}</div>
- </div>
-
- <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-timing-function: linear</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-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 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-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 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("ttf_linear",275,150)}}</div>
- </div>
-
- <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-timing-function: step-end</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-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-.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-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-</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("ttf_stepend",275,150)}}</div>
- </div>
-
- <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
- <p><code>transition-timing-function: steps(4, end)</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-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-.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-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-</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("ttf_step4end",275,150)}}</div>
- </div>
- </div>
- </dd>
- <dt>{{cssxref("transition-delay")}}</dt>
- <dd>Определя колко продължително е забавянето между момента, в който свойството е променено и този, в който преходът в действително започва.
- <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>
- </dd>
-</dl>
-
-<p>CSS синтаксисът е следния:</p>
-
-<pre class="brush: css">div {
-    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
-}</pre>
-
-<h2 id="Примери">Примери</h2>
-
-<h3 id="Пример_за_анимиране_на_едно_свойство">Пример за анимиране на едно свойство</h3>
-
-<p>Този пример показва преход в големината на шрифта с продължителност 4 секунди и 2 секунди забавяне между момента, в който потребителя посочи с показалеца на мишката върху елемента и началото на анимирания ефект:</p>
-
-<pre class="brush: css">#delay {
-  font-size: 14px;
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-}
-
-#delay:hover {
-  font-size: 36px;
-}
-</pre>
-
-<h3 id="Пример_за_анимиране_на_няколко_свойства">Пример за анимиране на няколко свойства</h3>
-
-<div class="hidden">
-<h4 id="HTML_съдържание">HTML съдържание</h4>
-
-<pre class="brush: html; highlight:[3]">&lt;body&gt;
-    &lt;p&gt;The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.&lt;/p&gt;
-    &lt;div class="box"&gt;Sample&lt;/div&gt;
-&lt;/body&gt;</pre>
-</div>
-
-<h4 id="CSS_съдържание">CSS съдържание</h4>
-
-<pre class="brush: css; highlight:[8,9]">.box {
-    border-style: solid;
-    border-width: 1px;
-    display: block;
-    width: 100px;
-    height: 100px;
-    background-color: #0000FF;
-    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-    transition: width 2s, height 2s, background-color 2s, transform 2s;
-}
-
-.box:hover {
-    background-color: #FFCCCC;
-    width: 200px;
-    height: 200px;
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p>
-
-<h3 id="Когато_списъците_със_стойности_на_свойствата_са_с_различни_дължини">Когато списъците със стойности на свойствата са с различни дължини</h3>
-
-<p>Ако списъкът със стойности на някое от свойствата на прехода е по-къс от другите, неговите стойности се преповтарят, за да съответстват на дължината на другите. Например:</p>
-
-<pre class="brush: css">div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s;
-}
-</pre>
-
-<p>Горното ще се приеме като:</p>
-
-<pre class="brush: css">div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s, 3s, 5s;
-}</pre>
-
-<p>Подобно на това, ако списъкът на някое от свойствата на прехода е по-дълъг от този на списъка с имената на свойствата, върху които трябва да се приложи прехода- {{cssxref("transition-property")}}, то първият бива отрязан, за да пасне. Ако имаме следния CSS:</p>
-
-<pre class="brush: css">div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s, 2s, 1s;
-}</pre>
-
-<p>Това ще бъде интерпретирано като:</p>
-
-<pre class="brush: css">div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s;
-}</pre>
-
-<h3 id="Използване_на_преходи_за_подчертаване_на_меню">Използване на преходи за подчертаване на меню</h3>
-
-<p>Често срещана употреба на CSS е за подчертаване елементите на меню, когато потребителя посочва с показалеца на мишката върху тях. Лесно е да се използват преходи,  за да се направи ефекта още по-привлекателен.</p>
-
-<p>Преди да преминем към частите от кода, можете да погледнете  <a href="https://codepen.io/anon/pen/WOEpva">примерна демонстрация</a> (ако вашият браузър поддържа преходи).</p>
-
-<p>Първо, сглобяваме менюто с HTML:</p>
-
-<pre class="brush: html">&lt;nav&gt;
-  &lt;a href="#"&gt;Home&lt;/a&gt;
-  &lt;a href="#"&gt;About&lt;/a&gt;
-  &lt;a href="#"&gt;Contact Us&lt;/a&gt;
-  &lt;a href="#"&gt;Links&lt;/a&gt;
-&lt;/nav&gt;</pre>
-
-<p>След това, с  написаното в CSS пресъздаваме как искаме да изглежда това меню и как да реагира. Съществените аспекти са показани тук:</p>
-
-<pre class="brush: css">a {
-  color: #fff;
-  background-color: #333;
-  transition: all 1s ease-out;
-}
-
-a:hover,
-a:focus {
-  color: #333;
-  background-color: #fff;
-}
-</pre>
-
-<p>Това стилизиране изразява изгледа на менюто- с цветове за фон и за текст, които се сменяват, когато се посочи с мишката върху дадения елемент ( {{cssxref(":hover")}} ) и когато елементът е на фокус( {{cssxref(":focus")}} ).</p>
-
-<h2 id="Примери_с_JavaScript">Примери с JavaScript</h2>
-
-<div class="note">
-<p>Трябва да се внимава, когато се използват преходи непосредствено след:</p>
-
-<ul>
- <li>добавяне на елемент към DOM посредством <code>.appendChild()</code></li>
- <li>премахване на свойството на елемента <code>display: none;</code></li>
-</ul>
-
-<p>Това се приема като сякаш първоначалното състояние никога не е настъпвало и елементът е винаги в своето крайно състояние. Това лесно се заобикаля, като се приложи  <code>window.setTimeout()</code> с необходимите милисекунди преди да променяте свойството, върху което смятате да приложите преход.</p>
-</div>
-
-<h3 id="Използване_на_преходи_за_гладко_изпълнение_на_JavaScript">Използване на преходи за гладко изпълнение на JavaScript</h3>
-
-<p>Преходите са чудесен инструмент, който прави нещата да се случват плавно без да нарушавате функционалността зададена с  JavaScript. Ето един пример:</p>
-
-<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
-&lt;div id="foo"&gt;&lt;/div&gt;
-</pre>
-
-<p>Чрез JavaScript можете да визуализирате как движите топка до определена позиция:</p>
-
-<pre class="brush: js">var f = document.getElementById('foo');
-document.addEventListener('click', function(ev){
-    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
-    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
-},false);
-</pre>
-
-<p>Чрез прилагане на стилизиране можете да го направите плавно без никакви особени усилия. Просто добавяте преход към елемента и всяка промяна ще се случва плавно:</p>
-
-<pre class="brush: css">p {
-  padding-left: 60px;
-}
-
-#foo {
-  border-radius: 50px;
-  width: 50px;
-  height: 50px;
-  background: #c00;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform 1s;
-}
-</pre>
-
-<p>Можете да се упражнявате тук: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p>
-
-<h3 id="Отчитане_на_началото_и_края_на_преход">Отчитане на началото и края на преход</h3>
-
-<p>Можете да използвате събитието {{event("transitionend")}} ,за да засичате дали анимираното движение е свършило да се изпълнява. То е обект тип {{domxref("TransitionEvent")}} и има две допълнително добавени свойства извън типичните за обектите от тип {{domxref("Event")}} :</p>
-
-<dl>
- <dt><code>propertyName</code></dt>
- <dd>Низ, който показва името на CSS свойството, чойто преход е приключил.</dd>
- <dt><code>elapsedTime</code></dt>
- <dd>Плаващо число, което показва броя секунди от които вече тече прехода към момента на инициирането на събитието. Тази стойност не е засегната от стойноста за отложен преход {{cssxref("transition-delay")}}.</dd>
-</dl>
-
-<p>Както обикновено, можете да използвате метода ("EventTarget.addEventListener", "addEventListener()")}} за наблюдаване:</p>
-
-<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
-</pre>
-
-<p>Можете да отчетете началото на прехода чрез  {{event("transitionrun")}} (задейства се преди всякакво зададено отлагане във времето) и {{event("transitionstart")}} ( задейства се след всякаво зададено отлагане във времето) по същия начин:</p>
-
-<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true);
-el.addEventListener("transitionstart", signalStart, true);</pre>
-
-<div class="note"><strong>Бележка</strong>: Събитието <code>transitionend</code> не се задейства, ако преходът е прекратен преди да е завършено поради това, че елементът е променен чрез {{cssxref("display")}}<code>: none</code> или е променена стойността на някое анимиращо свойство.</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', '', '')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Първоначална дефиниция</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0 {{property_prefix("-webkit")}}<br>
-    26.0</td>
-   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}</td>
-   <td>10</td>
-   <td>10.5 {{property_prefix("-o")}}<br>
-    12.10</td>
-   <td>3.2 {{property_prefix("-webkit")}}</td>
-  </tr>
-  <tr>
-   <td><code>transitionend</code> event</td>
-   <td>1.0<sup>[1]</sup><br>
-    26.0</td>
-   <td>{{CompatGeckoDesktop("2.0")}}</td>
-   <td>10</td>
-   <td>10.5<sup>[2]</sup><br>
-    12<br>
-    12.10</td>
-   <td>3.2<sup>[1]</sup><br>
-    6.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.1</td>
-   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
-    {{CompatGeckoMobile("16.0")}}</td>
-   <td>10</td>
-   <td>10 {{property_prefix("-o")}}<br>
-    12.10</td>
-   <td>3.2</td>
-  </tr>
-  <tr>
-   <td><code>transitionend</code> event</td>
-   <td>2.1<sup>[1]</sup></td>
-   <td>{{CompatGeckoMobile("2.0")}}</td>
-   <td>10</td>
-   <td>10<sup>[2]</sup><br>
-    12<br>
-    12.10</td>
-   <td>3.2<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Chrome 1.0, WebKit 3.2 and Android 2.1 изпълняват го като нестандартното  <code>webkitTransitionEnd</code>. Chrome 26.0 and WebKit 6.0 го изпълняват като стандартното  <code>transitionend</code>.</p>
-
-<p>[2] Opera 10.5 and Opera Mobile 10 го изпълняват като <code>oTransitionEnd</code>, версия 12 като <code>otransitionend</code>  и версия 12.10 като стандартното <code>transitionend</code>.</p>
-
-<h2 id="Вижте_също">Вижте също</h2>
-
-<ul>
- <li>Интерфейсът {{domxref("TransitionEvent")}} и събитието {{event("transitionend")}} .</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Използване на CSS анимации</a></li>
-</ul>