---
title: transitioncancel
slug: Web/Events/transitioncancel
tags:
  - DOM
  - Evento
  - Referencia
  - eventos
translation_of: Web/API/HTMLElement/transitioncancel_event
---
<p>{{SeeCompatTable}}</p>

<p>El evento <code>transitioncancel</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> es cancelada.</p>

<p>Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.</p>

<h2 id="Información_general">Información general</h2>

<dl>
 <dt>Interfaz</dt>
 <dd>{{domxref("TransitionEvent")}}</dd>
 <dt>Burbuja</dt>
 <dd>Sí</dd>
 <dt>Cancelable</dt>
 <dd>No</dd>
 <dt>Objetivo</dt>
 <dd>{{domxref("document")}}, {{domxref("element")}}</dd>
 <dt>Acción por defecto</dt>
 <dd>Ninguna</dd>
</dl>

<h2 id="Propiedades">Propiedades</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Propiedad</th>
   <th scope="col">Tipo</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyinline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>El objetivo del evento (the topmost target in the DOM tree).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyinline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>El tipo de evento.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyinline}}</td>
   <td>{{domxref("Boolean")}}</td>
   <td>Si el evento normalmente se propaga o no</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyinline}}</td>
   <td>{{domxref("Boolean")}}</td>
   <td>Si el evento es cancelable o no</td>
  </tr>
  <tr>
   <td><code>propertyName</code>{{readonlyinline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>El nombre de la propiedad CSS asociada con la transición.</td>
  </tr>
  <tr>
   <td><code>elapsedTime</code>{{readonlyinline}}</td>
   <td>{{domxref("Float")}}</td>
   <td>
    <p>La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de <code>transition-delay</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>pseudoElement</code>{{readonlyinline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(53)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(53)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li>El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}</li>
 <li>La interfaz {{domxref("TransitionEvent")}}</li>
 <li>{{event("transitionstart")}}, {{event("transitionend")}}</li>
 <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li>
</ul>