# Render Effects

This page covers how the `effect` and `mask` attributes on the root element provide fade-in, expand and skeleton loading effects on the first render.

## Syntax

```html
<div id="app" effect="fade-in">
  <p>{{ message }}</p>
</div>
```

QuickUI injects the matching CSS into `<head>` when it loads. After the render is applied, the root element gets the `show` class to start the transition, and 300 ms later the effect attributes and the `show`, `fade-in`, `expand` and `loading-block` classes are removed.

## Available Effects

| Attribute | Effect |
|---|---|
| `effect="fade-in"` | Opacity 0 → 1 over 0.3 s |
| `effect="expand"` | Height grows from 0 to the content height (sets `min-height` from `scrollHeight`) over 0.3 s |
| `mask="1"` | Covers the content with a grey gradient skeleton animation that fades out after rendering |

`effect` can also be written as `:effect`; legacy forms such as `animation="fade-in"` are planned for removal in 1.0.0, see [Deprecations](/deprecations).

## Rules

| Rule | Description |
|---|---|
| Target | Only the root element (the one referenced by `id`) |
| How often | The attributes are removed after the first render, so later updates do not replay them |
| `mask="true"` | The injected CSS makes its overlay transparent from the start, so nothing shows; use `mask="1"` |
| Image loader | `:effect="circle"` on `<img>` belongs to [Image Lazy Loading](/lazyload) |