> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Layer Transition Lifecycle for CSS

> The CSS classes that mark each stage of a layer's transition in and out of the active state.

### Layer Transition Lifecycle

**Activation/Active state means**: Output plays the layer' parent Visual <u>AND</u> Layer Condition is Live

* `.layer-in-transition` when the layer is **in** a transition mode between **active** states
  * ~~`+750 ms`~~
* `.layer-transition-in` when a layer becomes **active**
* `.layer-transition-out` when a layer becomes **inactive**
* `.layer-visible`  Layer transition \*\*done \*\*and Layer is **visible** and is **active**
* `.layer-hidden` Layer transition \*\*done \*\*and Layer is **hidden** and is not **active**

<Note>
  Future Lifecycle improvements include Visual's CUE-IN state (to know that a Visual is coming up in Output Player Rundown Queue) and a CUE-OUT state which identifies when a Visual's playtime is almost over.
</Note>

<img src="https://mintcdn.com/visualradioassist/1LQdAqmw3LInyH_s/images/develop-with-vra/develop-visual-graphics/layer-transition-lifecycle-for-css/1.png?fit=max&auto=format&n=1LQdAqmw3LInyH_s&q=85&s=e6c23aca2f637ce0a884e8b32f789e35" alt="Layer Transition Lifecycle in an Output Player" width="1368" height="2953" data-path="images/develop-with-vra/develop-visual-graphics/layer-transition-lifecycle-for-css/1.png" />

### Default opacity (fade) transition / CSS

```scss theme={null}
.layer {
  &:not(.type-html):not(.type-visual):not(.type-snippet) {
    display: flex;
  }

  &.layer-out-transition {
    opacity: 1;
    transition: 300ms ease-in;
  }

  iframe {
    position: relative;
    z-index: -1;
  }

  &.layer-in-transition {
    opacity: 0;
    transition: 300ms ease-out;
  }

  &.layer-transition-in {
    opacity: 0;
  }

  &.layer-visible {
    opacity: 100;
  }

  &.layer-transition-out {
    opacity: 100;
  }

  &.layer-hidden {
    opacity: 0;
  }
}
```