---
title: Използване на CSS преходи
slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
tags:
- CSS
- CSS преходи
- Напреднали
- Преходи
- наръчник
translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
---
{{CSSref}}
CSS преходите предоставят способ за контролиране на скоростта на анимацията при промяна на CSS свойствата. По този начин, вместо промяната в свойството да се приложи незабавно, бихме могли да предизвикаме промната да се случи за определен период от време. Например, ако сменяте цвета на елемента от бял на черен, обикновено това става мигновено. С активиран CSS преход, промените настъпват на определени интерали които съответстват на скоростта и могат да бъдат персонализирани.
Анимации, които включват преходи между две състояния, могат да бъдат наречени безусловни, тъй като състоянията между началното и крайното са определени от самия бразър.
CSS преходите позволяват да изберете кои свойства да анимирате (като ги посочите изрично), кога да започне анимацията ( като зададете отложено начало),колко продължителен ще е самият преход (като зададете продължителност) или как да бъде изпълнен прехода (като се определи времевата функция, т.е. линейно или бързо в началото и със забавяне в края).
Кое CSS свойство може да бъде преходно?
Авторът може да определи кои свойства на своето уеб творение да анимира и по какъв начин. Това дава поле за създаване на сложни преходи. Поради това, че няма смисъл в анимирането на някои свойства, списъкът със свoйства, подходящи за анимиране е ограничен до определен брой.
Бележка: Наборът от елементи, подходящи за анимиране, се променя в зависимост от разработването на спецификациите.
Стойността auto е в повечето слуаи доста сложен случай. Спецификаците препоръчват да не се изпълняват анимации от или към стойност auto. Някои потребителски агенти, като тези произхождащи от Gecko, следват тези изисквания, докато други, базирани на WebKit, не са толкова стриктни. Използване на анимации с auto може да доведе до непредвидими резултати, зависещи от браузера и неговата версия, поради това трябва да бъдат избягвани.
Задаване на преходи
CSS преходите се контролират чрез свойството {{cssxref("transition")}} . Това е и най-правилният начин за тяхното конфигуриране. Той помага да се преодолее фактът, че списъците с параметрите са несинхронни, а продължителното дебъгване на CSS може да бъде доста неприятно.
Можете да контролирате отделните компоненти на прехода чрез следните свойства:
(Забележете, че тези преходи се въртят в цикъл непрекъснато само за цел да покажем пример, CSS преходите само визуализират промяна на някое свойство от дедено начало до определен край. Ако се нуждаете от визуализиране на цикъл, погледнете в свойството на CSS анимация.)
- {{cssxref("transition-property")}}
- Задава името или имената на свойствата, върху които трябва да бъде проложен преход. Само свойствата, които са изброени тук, биват анимирани по време на преходите, промените по другите свойства настъпват незабавно- както е по подразбиране.
- {{cssxref("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);
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
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);
{{EmbedLiveSample("duration_1s",275,150)}}
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);
{{EmbedLiveSample("duration_2s",275,150)}}
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);
{{EmbedLiveSample("duration_4s",275,150)}}
- {{cssxref("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);
{{EmbedLiveSample("ttf_ease",275,150)}}
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);
{{EmbedLiveSample("ttf_linear",275,150)}}
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);
{{EmbedLiveSample("ttf_stepend",275,150)}}
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);
{{EmbedLiveSample("ttf_step4end",275,150)}}
- {{cssxref("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);
{{EmbedLiveSample("delay_0_5s",275,150)}}
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);
{{EmbedLiveSample("delay_1s",275,150)}}
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);
{{EmbedLiveSample("delay_2s",275,150)}}
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);
{{EmbedLiveSample("delay_4s",275,150)}}
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;
}
Пример за анимиране на няколко свойства
HTML съдържание
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box">Sample</div>
</body>
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);
}
{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}
Когато списъците със стойности на свойствата са с различни дължини
Ако списъкът със стойности на някое от свойствата на прехода е по-къс от другите, неговите стойности се преповтарят, за да съответстват на дължината на другите. Например:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
Горното ще се приеме като:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
Подобно на това, ако списъкът на някое от свойствата на прехода е по-дълъг от този на списъка с имената на свойствата, върху които трябва да се приложи прехода- {{cssxref("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;
}
Това стилизиране изразява изгледа на менюто- с цветове за фон и за текст, които се сменяват, когато се посочи с мишката върху дадения елемент ( {{cssxref(":hover")}} ) и когато елементът е на фокус( {{cssxref(":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/
Отчитане на началото и края на преход
Можете да използвате събитието {{event("transitionend")}} ,за да засичате дали анимираното движение е свършило да се изпълнява. То е обект тип {{domxref("TransitionEvent")}} и има две допълнително добавени свойства извън типичните за обектите от тип {{domxref("Event")}} :
propertyName- Низ, който показва името на CSS свойството, чойто преход е приключил.
elapsedTime- Плаващо число, което показва броя секунди от които вече тече прехода към момента на инициирането на събитието. Тази стойност не е засегната от стойноста за отложен преход {{cssxref("transition-delay")}}.
Както обикновено, можете да използвате метода ("EventTarget.addEventListener", "addEventListener()")}} за наблюдаване:
el.addEventListener("transitionend", updateTransition, true);
Можете да отчетете началото на прехода чрез {{event("transitionrun")}} (задейства се преди всякакво зададено отлагане във времето) и {{event("transitionstart")}} ( задейства се след всякаво зададено отлагане във времето) по същия начин:
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
Бележка: Събитието transitionend не се задейства, ако преходът е прекратен преди да е завършено поради това, че елементът е променен чрез {{cssxref("display")}}: none или е променена стойността на някое анимиращо свойство.
Спецификации
| Спецификация |
Статус |
Коментар |
| {{SpecName('CSS3 Transitions', '', '')}} |
{{Spec2('CSS3 Transitions')}} |
Първоначална дефиниция |
Съвместимост с браузъри
{{CompatibilityTable}}
| Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
| Basic support |
1.0 {{property_prefix("-webkit")}}
26.0 |
{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
{{CompatGeckoDesktop("16.0")}} |
10 |
10.5 {{property_prefix("-o")}}
12.10 |
3.2 {{property_prefix("-webkit")}} |
transitionend event |
1.0[1]
26.0 |
{{CompatGeckoDesktop("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 |
{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
{{CompatGeckoMobile("16.0")}} |
10 |
10 {{property_prefix("-o")}}
12.10 |
3.2 |
transitionend event |
2.1[1] |
{{CompatGeckoMobile("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.
Вижте също