remove retired locales (#699)

8 files changed, 0 insertions, 2297 deletions

diff --git a/files/bg/web/css/_colon_first-child/index.html b/files/bg/web/css/_colon_first-child/index.html
deleted file mode 100644
index 5937b72335..0000000000
--- a/files/bg/web/css/_colon_first-child/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: ':first-child'
-slug: 'Web/CSS/:first-child'
-tags:
-  - CSS
-  - Оформление
-  - Псевдоклас
-  - справочник
-translation_of: 'Web/CSS/:first-child'
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><a href="/bg/docs/Web/CSS">CSS</a> <a href="/bg/docs/Web/CSS/Pseudo-classes">псевдокласът</a> <code>:first-child</code> (:първо-дете) указва всеки елемент, намиращ се на първо място в списък с елементи от едно и също ниво в структурата на документа. В имплементациите на CSS3, за да бъде селектиран елемента, той трябва да има родител. В CSS4 това не е нужно.</span></p>
-
-<h2 id="Правопис">Правопис</h2>
-
-{{csssyntax}}
-
-<h2 id="Примери">Примери</h2>
-
-<h3 id="Пример_1">Пример 1</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;This p is styled, as it is a p, AND the first
-     child in the div&lt;/p&gt;
-  &lt;p&gt;This p is not styled; it is not the first child!&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;div&gt;
-  &lt;h2&gt;This h2 is not styled; it is not a p!&lt;/h2&gt;
-  &lt;p&gt;This p is not styled; it is not the first child!&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">p:first-child {
-  color: lime;
-  background-color: black;
-  padding: 5px;
-}
-</pre>
-
-<h4 id="Резултат">Резултат</h4>
-
-<p><span>{{EmbedLiveSample('Пример_1','100%',300)}}</span></p>
-
-<h3 id="Пример_2_-_с_използване_на_UL">Пример 2 - с използване на UL</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;List 1&lt;/li&gt;
-  &lt;li&gt;List 2&lt;/li&gt;
-  &lt;li&gt;List 3&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">li{
-  color:blue;
-}
-li:first-child{
-  color:green;
-}</pre>
-
-<h4 id="Резултат_2">Резултат</h4>
-
-<p><span>{{EmbedLiveSample('Пример_2_-_с_използване_на_UL',300,100)}}</span></p>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Елементите няма нужда да имат родител за да бъдат селектирани.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Без промяна.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Начална дефиниция.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Съвместимост_на_четците">Съвместимост на четците</h2>
-
-<div class="hidden">
-<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
-</div>
-
-<p>{{Compat("css.selectors.first-child")}}</p>
-
-<h2 id="Вижте_също">Вижте също</h2>
-
-<ul>
- <li>{{cssxref(":last-child")}}</li>
- <li>{{cssxref(":nth-child")}}</li>
- <li>{{cssxref(":last-of-type")}}</li>
-</ul>
diff --git a/files/bg/web/css/_colon_nth-child/index.html b/files/bg/web/css/_colon_nth-child/index.html
deleted file mode 100644
index f453b1ff6b..0000000000
--- a/files/bg/web/css/_colon_nth-child/index.html
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: ':nth-child()'
-slug: 'Web/CSS/:nth-child'
-tags:
-  - CSS
-  - Изложение
-  - мрежа
-  - псведоклас
-  - справочник
-translation_of: 'Web/CSS/:nth-child'
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/bg/docs/Web/CSS/Pseudo-classes">Псевдокласът</a> в <a href="/bg/docs/Web/CSS">CSS</a> <strong><code>:nth-child()</code></strong> намира съвпадения според тяхното място в множество от съседни елементи.</p>
-
-<pre class="brush: css no-line-numbers">/* Избира всеки четвърти елемент
-   сред всяко множество от съседи */
-:nth-child(4n) {
-  color: lime;
-}
-</pre>
-
-<h2 id="Syntax" name="Syntax">Правопис</h2>
-
-<p>Псевдокласът <code>nth-child</code>  се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.</p>
-
-<h3 id="Стойности_за_ключови_думи">Стойности за ключови думи</h3>
-
-<dl>
- <dt><code>odd</code></dt>
- <dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.</dd>
- <dt><code>even</code></dt>
- <dd>Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.</dd>
-</dl>
-
-<h3 id="Функционално_записване">Функционално записване</h3>
-
-<dl>
- <dt><code>&lt;An+B&gt;</code></dt>
- <dd>Избира елементи, чието местоположение в поредица от съседи съответства на образеца <code>An+B</code> за всяко положително число или нулева стойност на <code>n</code>. указателят за първия елемент е <code>1</code>. Стойностите <code>A</code> и <code>B</code> трябва да са от вида {{cssxref("&lt;integer&gt;")}}s.</dd>
-</dl>
-
-<h3 id="Правопис">Правопис</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">Примери</h2>
-
-<h3 id="Example_selectors" name="Example_selectors">Примерни образци за избор</h3>
-
-<dl>
- <dt><code>tr:nth-child(odd)</code> or <code>tr:nth-child(2n+1)</code></dt>
- <dd>Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.</dd>
- <dt><code>tr:nth-child(even)</code> or <code>tr:nth-child(2n)</code></dt>
- <dd>Избира четните редове  в таблица в HTML: 2, 4, 6 и т.н.</dd>
- <dt><code>:nth-child(7)</code></dt>
- <dd>Избира седмия елемент.</dd>
- <dt><code>:nth-child(5n)</code></dt>
- <dd>Избира всеки пети елемент: 5 [=5x1], 10 [=5x2], 15 [=5x3], и т.н. </dd>
- <dt><code>:nth-child(3n+4)</code></dt>
- <dd>Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3x0)+4], 7 [= (3x1)+4], 10 [= (3x2)+4], 13 [= (3x3)+4], etc.</dd>
- <dt><code>:nth-child(-n+3)</code></dt>
- <dd>Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]</dd>
- <dt><code>p:nth-child(n)</code></dt>
- <dd>Избира всеки елемент <code>&lt;p&gt;</code> в множество от съседи. Избират се същите елементи както при обикновен избор <code>p</code>, но се прилагат по-точни указания.</dd>
- <dt><code>p:nth-child(1)</code> or <code>p:nth-child(0n+1)</code></dt>
- <dd>Избира всеки първи елемент <code>&lt;p&gt;</code>  в множество от съседи. Това е същото като {{cssxref(":first-child")}} и има същата точност.</dd>
-</dl>
-
-<dl>
- <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
- <dd>Избира от осмия до петнадесетия елемент <code>&lt;p&gt;</code> включително в множество от съседи. </dd>
-</dl>
-
-<p> </p>
-
-<h3 id="Подробен_пример">Подробен пример</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITHOUT an
-   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
-&lt;p&gt;Children 1, 3, 5, and 7 are selected.&lt;/p&gt;
-&lt;div class="first"&gt;
-  &lt;span&gt;Span 1!&lt;/span&gt;
-  &lt;span&gt;Span 2&lt;/span&gt;
-  &lt;span&gt;Span 3!&lt;/span&gt;
-  &lt;span&gt;Span 4&lt;/span&gt;
-  &lt;span&gt;Span 5!&lt;/span&gt;
-  &lt;span&gt;Span 6&lt;/span&gt;
-  &lt;span&gt;Span 7!&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;br&gt;
-
-&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITH an
-   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
-&lt;p&gt;Children 1, 5, and 7 are selected.&lt;br&gt;
-   3 is used in the counting because it is a child, but it isn't
-   selected because it isn't a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
-&lt;div class="second"&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;em&gt;This is an `em`.&lt;/em&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;br&gt;
-
-&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, WITH an
-   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
-&lt;p&gt;Children 1, 4, 6, and 8 are selected.&lt;br&gt;
-   3 isn't used in the counting or selected because it is an &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
-   not a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, and &lt;code&gt;nth-of-type&lt;/code&gt; only selects
-   children of that type. The &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; is completely skipped
-   over and ignored.&lt;/p&gt;
-&lt;div class="third"&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;em&gt;This is an `em`.&lt;/em&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-  &lt;span&gt;Span&lt;/span&gt;
-  &lt;span&gt;Span!&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">html {
-  font-family: sans-serif;
-}
-
-span,
-div em {
-  padding: 5px;
-  border: 1px solid green;
-  display: inline-block;
-  margin-bottom: 3px;
-}
-
-.first span:nth-child(2n+1),
-.second span:nth-child(2n+1),
-.third span:nth-of-type(2n+1) {
-  background-color: lime;
-}</pre>
-
-<h4 id="Изход">Изход</h4>
-
-<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</p>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Добавя правопис за <code>of &lt;selector&gt;</code>  и уточнява, че за съвпадащите елементи не е задължително да имат родители.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Първоначално определение.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Съвместимост">Съвместимост</h2>
-
-<div>
-
-
-<p>{{Compat("css.selectors.nth-child")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">Вижте също</h2>
-
-<ul>
- <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
-</ul>
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>
diff --git a/files/bg/web/css/index.html b/files/bg/web/css/index.html
deleted file mode 100644
index 45635d6122..0000000000
--- a/files/bg/web/css/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: CSS
-slug: Web/CSS
-tags:
-  - CSS
-  - Design
-  - Landing
-  - Layout
-  - NeedsTranslation
-  - Reference
-  - TopicStub
-  - 'l10n:priority'
-translation_of: Web/CSS
----
-<div>{{CSSRef}}</div>
-
-<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) e стилов език използван, за да опише оформлението на документи, написани на <a href="/en-US/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> или <a href="/en-US/docs/XML_introduction">XML</a> (включително диалекти на XML като <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a> или {{Glossary("XHTML", "", 1)}}). CSS описва как елементите трябва да се явят на екрана, на хартия, по време на разговор или на друга медийна платформа.</p>
-
-<p>CSS е един от основните езици на <strong>open Web</strong> и е стандартен сред уеб браузърите според <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Създаден на нива, CSS1 в момента е неподдържан, CSS2.1 е препоръчителен и  <a href="/en-US/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, който в момента е разделен на по-малки модули, напредва към стандартизация.</p>
-
-<section id="sect1">
-<ul class="card-grid">
- <li><span>CSS Introduction</span>
-
-  <p>If you're new to web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> article to learn what CSS is and how to use it.</p>
- </li>
- <li><span>CSS Tutorials</span>
-  <p>Our <a href="/en-US/docs/Learn/CSS">CSS learning area</a> contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.</p>
- </li>
- <li><span>CSS Reference</span>
-  <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p>
- </li>
-</ul>
-
-<div class="row topicpage-table">
-<div class="section">
-<h2 class="Documentation" id="Tutorials">Tutorials</h2>
-
-<p>Our <a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> features multiple modules that teach CSS from the ground up — no previous knowledge required.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt>
- <dd>This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
- <dd>This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
- <dd>This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
- <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.</dd>
-</dl>
-</div>
-
-<div class="section">
-<h2 class="Tools" id="Reference">Reference</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li>
- <li>CSS key concepts:
-  <ul>
-   <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li>
-   <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li>
-   <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS units and values</a></li>
-   <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li>
-   <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li>
-   <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li>
-   <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li>
-   <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li>
-   <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
-   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
-   <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
-   <li><a href="/en-US/docs/Web/CSS/animation">Animation</a></li>
-  </ul>
- </li>
-</ul>
-
-<h2 class="Tools" id="Cookbook">Cookbook</h2>
-
-<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p>
-
-<h2 class="Tools" id="Tools_for_CSS_development">Tools for CSS development</h2>
-
-<ul>
- <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li>
- <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li>
- <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li>
- <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li>
-</ul>
-
-<h2 id="Meta_bugs">Meta bugs</h2>
-
-<ul>
- <li>Firefox: {{bug(1323667)}}</li>
-</ul>
-</div>
-</div>
-</section>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li>
- <li>Web languages to which CSS is often applied: <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, and <a href="/en-US/docs/XML_introduction">XML</a>.</li>
- <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/docs/Mozilla/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Mozilla/Add-ons">extensions</a> and <a href="/en-US/docs/Mozilla/Add-ons/Themes">themes</a>.</li>
- <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla mailing list</a></li>
- <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">Stack Overflow questions about CSS</a></li>
-</ul>
diff --git a/files/bg/web/css/pseudo-classes/index.html b/files/bg/web/css/pseudo-classes/index.html
deleted file mode 100644
index 090a054efa..0000000000
--- a/files/bg/web/css/pseudo-classes/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Псевдокласове
-slug: Web/CSS/Pseudo-classes
-tags:
-  - CSS
-  - Избор на елементи
-  - Псевдоклас
-  - Селектори
-  - справочник
-translation_of: Web/CSS/Pseudo-classes
----
-<div>{{CSSRef}}</div>
-
-<p><strong>Псевдокласовете</strong> са ключови думи, добавени към селектор, описващи специфично състояние на указаните елементи. Примерно, можем да използваме {{ Cssxref(":hover") }} за да сменим фона на елемент, когато потребителят мине с мишката върху него.</p>
-
-<pre><code>div:hover {
-  background-color: #F89B4D;
-}</code></pre>
-
-<p>Чрез псевдокласовете можете да определяте външния вид на елемент, не само според местоположението му в дървото на документа (пр. {{ cssxref(":first-child") }}), но също и според външни фактори, каквито са историята на разглеждането (пр. {{ cssxref(":visited") }}), състоянието на елемента (пр. {{ cssxref(":checked") }} при някои елементи за формуляри), мястото на мишката (пр. {{ cssxref(":hover") }} позволява да се установи дали мишката се намира върху елемента)...</p>
-
-<div class="note">
-<p><strong>Бележка:</strong> За разлика от псевдокласовете, <a href="/bg/docs/Web/CSS/Pseudo-elements">псевдоелементите</a> служат за стилизиране на конкретна част от html елемент. </p>
-</div>
-
-<h2 id="Правопис">Правопис</h2>
-
-<pre class="syntaxbox">selector:pseudo-class {
-  свойство: стойност;
-}
-</pre>
-
-<p>Както при обикновените класове, можете да изредите заедно колкото искате псевдокласове в един указател за избор на елементи (селектор).</p>
-
-<h2 id="Индекс_на_стандартни_псевдокласове">Индекс на стандартни псевдокласове:</h2>
-
-<div class="index">
-<ul>
- <li>{{ Cssxref(":active") }}</li>
- <li>{{ cssxref(':any')}}</li>
- <li>{{ Cssxref(":checked") }}</li>
- <li>{{ Cssxref(":default") }}</li>
- <li>{{ Cssxref(":dir", ":dir()")}}</li>
- <li>{{ Cssxref(":disabled") }}</li>
- <li>{{ Cssxref(":empty") }}</li>
- <li>{{ Cssxref(":enabled") }}</li>
- <li>{{ Cssxref(":first") }}</li>
- <li>{{ Cssxref(":first-child") }}</li>
- <li>{{ Cssxref(":first-of-type") }}</li>
- <li>{{ Cssxref(":fullscreen") }}</li>
- <li>{{ Cssxref(":focus") }}</li>
- <li>{{ Cssxref(":hover") }}</li>
- <li>{{ Cssxref(":indeterminate") }}</li>
- <li>{{ Cssxref(":in-range") }}</li>
- <li>{{ Cssxref(":invalid") }}</li>
- <li>{{ Cssxref(":lang", ":lang()") }}</li>
- <li>{{ Cssxref(":last-child") }}</li>
- <li>{{ Cssxref(":last-of-type") }}</li>
- <li>{{ Cssxref(":left") }}</li>
- <li>{{ Cssxref(":link") }}</li>
- <li>{{ Cssxref(":not", ":not()") }}</li>
- <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
- <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
- <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
- <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
- <li>{{ Cssxref(":only-child") }}</li>
- <li>{{ Cssxref(":only-of-type") }}</li>
- <li>{{ Cssxref(":optional") }}</li>
- <li>{{ Cssxref(":out-of-range") }}</li>
- <li>{{ Cssxref(":read-only") }}</li>
- <li>{{ Cssxref(":read-write") }}</li>
- <li>{{ Cssxref(":required") }}</li>
- <li>{{ Cssxref(":right") }}</li>
- <li>{{ Cssxref(":root") }}</li>
- <li>{{ Cssxref(":scope") }}</li>
- <li>{{ Cssxref(":target") }}</li>
- <li>{{ Cssxref(":valid") }}</li>
- <li>{{ Cssxref(":visited") }}</li>
-</ul>
-</div>
-
-<h2 id="Спецификации"><span>Спецификации</span></h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Fullscreen') }}</td>
-   <td>{{ Spec2('Fullscreen') }}</td>
-   <td>Дефинира <code>:fullscreen</code>.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML WHATWG') }}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td>Без промяна спрямо {{ SpecName('HTML5 W3C') }}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Дефинира <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> и <code>:matches()</code>.<br>
-    Без значителни промени спрямо псевдокласовете дефинирани в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (семантичното значение не е взето предвид).</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML5 W3C') }}</td>
-   <td>{{ Spec2('HTML5 W3C') }}</td>
-   <td>Дефинира семантично значение в контекста на HTML за <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>.<br>
-    Дефинира <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> и <code>:dir()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Basic UI') }}</td>
-   <td>{{ Spec2('CSS3 Basic UI') }}</td>
-   <td>Дефинира <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> и <code>:read-write</code>, но без да ги обвързва със семантично значение.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Дефинира <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> и <code>:not()</code>.<br>
-    Дефинира синтаксиса на <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> и <code>:indeterminate</code>, но без да ги обвързва със семантично значение.<br>
-    Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS2.1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Дефинира <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> и <code>:focus</code>.<br>
-    Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Дефинира <code>:link</code>, <code>:visited</code> и <code>:active</code>, но без да ги обвързва със семантично значение.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Вижте_също">Вижте също</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a></li>
-</ul>
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">/* &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>
diff --git a/files/bg/web/css/transition/index.html b/files/bg/web/css/transition/index.html
deleted file mode 100644
index 20e1062691..0000000000
--- a/files/bg/web/css/transition/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: transition
-slug: Web/CSS/transition
-tags:
-  - CSS
-  - CSS преходи
-  - CSS свойства
-  - Справка
-translation_of: Web/CSS/transition
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/en/CSS" title="CSS">CSS </a>свойството  <strong><code>transition</code></strong>  е <a href="/en-US/docs/Web/CSS/Shorthand_properties">общото свойство</a> за {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} и {{ cssxref("transition-delay") }}.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
-
-<p class="hidden">Източникът за този интерактивен пример се съхранява в GitHub. Ако желаете да допринесете към проекта за интерактивния пример, моля клонирайте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете запитване за pull.</p>
-
-<p>Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез <a href="/en-US/docs/Web/CSS/Pseudo-classes">псево класове</a> като {{cssxref(":hover")}} или {{cssxref(":active")}} или динамично зададени чрез JavaScript.</p>
-
-<h2 id="Синтаксис"><strong>Синтаксис</strong></h2>
-
-<pre class="brush:css no-line-numbers">/* За 1 свойство */
-/* property name | duration */
-transition: margin-right 4s;
-
-/* property name | duration | delay */
-transition: margin-right 4s 1s;
-
-/* property name | duration | timing function */
-transition: margin-right 4s ease-in-out;
-
-/* property name | duration | timing function | delay */
-transition: margin-right 4s ease-in-out 1s;
-
-/* За 2 свойства */
-transition: margin-right 4s, color 1s;
-
-/* За всички променени свойства */
-transition: all 0.5s ease-out;
-
-/* Глобални стойности */
-transition: inherit;
-transition: initial;
-transition: unset;
-</pre>
-
-<p>Свойството <code>transition</code> се задава като един или повече прехода, всеки от които е за отделно свойство, разделени чрез запетая.</p>
-
-<p>Всеки преход за отделните свойства описва преходът, който трябва да бъде приложен на съответното свойство(или на специалните стойности <code>all</code> и <code>none</code>). Това включва:</p>
-
-<ul>
- <li>нито една или една стойност, представляваща свойство върху което да се приложи прехода. Може да бъде всяко от следните:
-  <ul>
-   <li>ключовата дума <code>none</code></li>
-   <li>ключовата дума <code>all</code></li>
-   <li>упоменаване на CSS свойство {{cssxref("&lt;custom-ident&gt;")}} .</li>
-  </ul>
- </li>
- <li> {{cssxref("&lt;single-transition-timing-function&gt;")}} нито една или една стойност, представляваща времевата функция, която да се употребява</li>
- <li>нито една, една или две стойности {{cssxref("&lt;time&gt;")}}. Първата стойност, която може да бъде парсната като време се задава на {{cssxref("transition-duration")}} а втората, която може да бъде парсната като време, се задава на {{cssxref("transition-delay")}}.</li>
-</ul>
-
-<p>Вижте, <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths">как се употребяват</a> списъците от стойности на свойства, когато са с различна дължина. Накратко, ако има повече описания на прехода, отколкото реалния брой на свойствата за анимиране, то тези излишни описания се пренебрегват.</p>
-
-<h3 id="Официален_синтаксис">Официален синтаксис</h3>
-
-{{csssyntax}}
-
-<h2 id="Примери">Примери</h2>
-
-<p>Има няколко примера за CSS преходи в статията <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">Използване на CSS Преходи</a> .</p>
-
-<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-shorthand-property', 'transition') }}</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")}}</p>
-
-<h2 id="Вижте_също">Вижте също</h2>
-
-<ul>
- <li><a href="/bg/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Използване на CSS преходи</a></li>
- <li>{{ domxref("TransitionEvent") }}</li>
-</ul>