CSS преходите предоставят способ за контролиране на скоростта на анимацията при промяна на CSS свойствата. По този начин, вместо промяната в свойството да се приложи незабавно, бихме могли да предизвикаме промната да се случи за определен период от време. Например, ако сменяте цвета на елемента от бял на черен, обикновено това става мигновено. С активиран CSS преход, промените настъпват на определени интерали които съответстват на скоростта и могат да бъдат персонализирани.

Анимации, които включват преходи между две състояния, могат да бъдат наречени безусловни, тъй като състоянията между началното и крайното са определени от самия бразър.

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

CSS преходите позволяват да изберете кои свойства да анимирате (като  ги посочите изрично), кога да започне анимацията ( като зададете отложено начало),колко продължителен ще е самият преход (като зададете продължителност) или как да бъде изпълнен прехода (като се определи времевата функция, т.е. линейно или бързо в началото и със забавяне в края).

Кое CSS свойство може да бъде преходно?

Авторът може да определи кои свойства на своето уеб творение да анимира и по какъв  начин. Това дава поле за създаване на сложни преходи. Поради това, че няма смисъл в анимирането на някои свойства, списъкът със свoйства, подходящи за анимиране е ограничен до определен брой.

Бележка: Наборът от елементи, подходящи за анимиране, се променя в зависимост от разработването на спецификациите.

Стойността auto  е в повечето слуаи доста сложен случай. Спецификаците препоръчват да не се изпълняват анимации от или към стойност auto. Някои потребителски агенти, като тези произхождащи от Gecko, следват тези изисквания, докато други, базирани на WebKit, не са толкова стриктни. Използване на анимации с auto  може да доведе до непредвидими резултати, зависещи от браузера и неговата версия, поради това трябва да бъдат избягвани.

Задаване на преходи

CSS преходите се контролират чрез свойството transition . Това е и най-правилният начин за тяхното конфигуриране. Той помага да се преодолее фактът, че списъците с параметрите са несинхронни, а продължителното дебъгване на CSS  може да бъде доста неприятно.

Можете да контролирате  отделните компоненти на прехода чрез следните свойства:

(Забележете, че тези преходи се въртят в цикъл непрекъснато само за цел да покажем пример, CSS преходите само визуализират промяна на някое свойство от дедено начало до определен край. Ако се нуждаете от визуализиране на цикъл, погледнете в свойството на CSS анимация.)

transition-property
Задава името или имената на свойствата, върху които трябва да бъде проложен преход. Само свойствата, които са изброени тук, биват анимирани по време на преходите, промените по другите свойства настъпват незабавно- както е по подразбиране.
transition-duration
Задава продължитеността за която трябва да настъпо промяната. Можете да зададете една профължителност, която да важи за всички свойства по време на прехода или различни такива, които позволяват всяко свойство да се променя за различен период от време.

transition-duration: 0.5s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-duration: 1s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-duration: 2s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-duration: 4s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);
transition-timing-function
Задава функцията, зависеща от времето, по която  свойствата да бъдат изчислени за междинните точки на прехода.Тази функция се нарича времева функция и калкулира стойностите на свойствата за тези междинни точки. Повече времеви функции могат да бъдат зададени чрез предоставяне на графика на съответната функция. Тя трябва да се състои от четири точки, които да дефинират кубична крива на Безие ( две крайни и двете междинни, които лесно управляват формата на кривата).  Можете да изберете колко плавно (easing) ще се извърши прехода от този помощен сайт .

transition-timing-function: ease

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-timing-function: linear

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-timing-function: step-end

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-timing-function: steps(4, end)

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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);
}
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);
transition-delay
Определя колко продължително е забавянето между момента, в който свойството е променено и този, в който преходът в действително започва.

transition-delay: 0.5s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-delay: 1s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-delay: 2s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

transition-delay: 4s

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.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;
}
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);

CSS синтаксисът е следния:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Примери

Пример за анимиране на едно свойство

Този пример показва преход в големината на шрифта с продължителност 4 секунди и 2 секунди забавяне между момента, в който потребителя посочи с показалеца на мишката върху елемента и началото на анимирания ефект:

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

Пример за анимиране на няколко свойства

CSS съдържание

.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);
}

Когато списъците със стойности на свойствата са с различни дължини

Ако списъкът със стойности на някое от свойствата на прехода е по-къс от другите, неговите стойности се преповтарят, за да съответстват на дължината на другите. Например:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

Горното ще се приеме като:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

Подобно на това, ако списъкът на някое от свойствата на прехода е по-дълъг от този на списъка с имената на свойствата, върху които трябва да се приложи прехода- transition-property, то първият бива отрязан, за да пасне. Ако имаме следния CSS:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

Това ще бъде интерпретирано като:

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

Използване на преходи за подчертаване на меню

Често срещана употреба на CSS е за подчертаване елементите на меню, когато потребителя посочва с показалеца на мишката върху тях. Лесно е да се използват преходи,  за да се направи ефекта още по-привлекателен.

Преди да преминем към частите от кода, можете да погледнете  примерна демонстрация (ако вашият браузър поддържа преходи).

Първо, сглобяваме менюто с HTML:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>

След това, с  написаното в CSS пресъздаваме как искаме да изглежда това меню и как да реагира. Съществените аспекти са показани тук:

a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}

Това стилизиране изразява изгледа на менюто- с цветове за фон и за текст, които се сменяват, когато се посочи с мишката върху дадения елемент ( :hover ) и когато елементът е на фокус( :focus ).

Примери с JavaScript

Трябва да се внимава, когато се използват преходи непосредствено след:

  • добавяне на елемент към DOM посредством .appendChild()
  • премахване на свойството на елемента display: none;

Това се приема като сякаш първоначалното състояние никога не е настъпвало и елементът е винаги в своето крайно състояние. Това лесно се заобикаля, като се приложи  window.setTimeout() с необходимите милисекунди преди да променяте свойството, върху което смятате да приложите преход.

Използване на преходи за гладко изпълнение на JavaScript

Преходите са чудесен инструмент, който прави нещата да се случват плавно без да нарушавате функционалността зададена с  JavaScript. Ето един пример:

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

Чрез JavaScript можете да визуализирате как движите топка до определена позиция:

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);

Чрез прилагане на стилизиране можете да го направите плавно без никакви особени усилия. Просто добавяте преход към елемента и всяка промяна ще се случва плавно:

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

Можете да се упражнявате тук: http://jsfiddle.net/9h261pzo/291/

Отчитане на началото и края на преход

Можете да използвате събитието transitionend ,за да засичате дали анимираното движение е свършило да се изпълнява. То е обект тип TransitionEvent и има две допълнително добавени свойства извън типичните за обектите от тип Event :

propertyName
Низ, който показва името на CSS свойството, чойто преход е приключил.
elapsedTime
Плаващо число, което показва броя секунди от които вече тече прехода към момента на инициирането на събитието. Тази стойност не е засегната от стойноста за отложен преход transition-delay.

Както обикновено, можете да използвате метода ("EventTarget.addEventListener", "addEventListener()")}} за наблюдаване:

el.addEventListener("transitionend", updateTransition, true);

Можете да отчетете началото на прехода чрез  transitionrun (задейства се преди всякакво зададено отлагане във времето) и transitionstart ( задейства се след всякаво зададено отлагане във времето) по същия начин:

el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
Бележка: Събитието transitionend не се задейства, ако преходът е прекратен преди да е завършено поради това, че елементът е променен чрез display: none или е променена стойността на някое анимиращо свойство.

Спецификации

Спецификация Статус Коментар
CSS Transitions Working Draft Първоначална дефиниция

Съвместимост с браузъри

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 -webkit
26.0
4.0 (2.0) -moz
16.0 (16.0)
10 10.5 -o
12.10
3.2 -webkit
transitionend event 1.0[1]
26.0
4.0 (2.0) 10 10.5[2]
12
12.10
3.2[1]
6.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 4.0 (2.0) -moz
16.0 (16.0)
10 10 -o
12.10
3.2
transitionend event 2.1[1] 4.0 (2.0) 10 10[2]
12
12.10
3.2[1]

[1] Chrome 1.0, WebKit 3.2 and Android 2.1 изпълняват го като нестандартното  webkitTransitionEnd. Chrome 26.0 and WebKit 6.0 го изпълняват като стандартното  transitionend.

[2] Opera 10.5 and Opera Mobile 10 го изпълняват като oTransitionEnd, версия 12 като otransitionend  и версия 12.10 като стандартното transitionend.

Вижте също

Етикети за документа и сътрудници

Допринесли за тази страница: petya5q2
Последно обновяване от: petya5q2,