Element: transitionrun event
============================

The **`transitionrun`** event is fired when a CSS transition is first created, i.e. before any `transition-delay` has begun.

This event is not cancelable.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("transitionrun", (event) => {});

ontransitionrun = (event) => {};
```

Event type
----------

A `TransitionEvent`. Inherits from `Event`.

Event

TransitionEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`TransitionEvent.propertyName` Read only 

A string containing the name CSS property associated with the transition.

`TransitionEvent.elapsedTime` Read only 

A `float` giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the `transition-delay` property.

`TransitionEvent.pseudoElement` Read only 

A string, starting with `::`, containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: `''`.

Examples
--------

This code adds a listener to the `transitionrun` event:


```js
el.addEventListener("transitionrun", () => {
  console.log(
    "Transition is running but hasn't necessarily started transitioning yet",
  );
});
```


The same, but using the `ontransitionrun` property instead of `addEventListener()`:


```js
el.ontransitionrun = () => {
  console.log(
    "Transition started running, and will start transitioning when the transition delay has expired",
  );
};
```

### Live example

In the following example, we have a simple `<div>` element, styled with a transition that includes a delay:


```html
<div class="transition">Hover over me</div>
<div class="message"></div>
```



```css
.transition {
  width: 100px;
  height: 100px;
  background: rgb(255 0 0 / 100%);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgb(255 0 0 / 0%);
}
```


To this, we'll add some JavaScript to indicate where the `transitionstart` and `transitionrun` events fire.


```js
const el = document.querySelector(".transition");
const message = document.querySelector(".message");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});
```


The difference is that:

* `transitionrun` fires when the transition is created (i.e. at the start of any delay).
* `transitionstart` fires when the actual animation has begun (i.e. at the end of any delay).

The `transitionrun` will occur even if the transition is canceled before the delay expires. If there is no transition delay or if transition-delay is negative, both `transitionrun` and `transitionstart` are fired.

Specifications
--------------

| Specification |
| --- |
| CSS Transitions # transitionrun |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `TransitionEvent` interface
* CSS properties: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* Related events: `transitionend`, `transitionstart`, `transitioncancel`