# [Usage](../../../usage.md) > Animations
K-Framework has some built-in animations for containers and elements that are automatized directly in the front-end.

## Fade In

![image](img/animations_1.gif)

Usage is simple, just add the `fade-in` class to your html element:
```html
<div class="fade-in"></div>
```
the javascript will handle the rest.  
Fade-in effect is sequential, meaning it will not fade in all the `fade-in` elements at once. Once the page load, it will fade in one element at time and only if visible in the viewport.

### Example: staggered cards

```html
<div class="row">
    <div class="col-md-4 fade-in">
        {!! \KFramework\Components\Visual\Card::make()->setTitle('First') !!} 
    </div>
    <div class="col-md-4 fade-in">
        {!! \KFramework\Components\Visual\Card::make()->setTitle('Second') !!}
    </div>
    <div class="col-md-4 fade-in">
        {!! \KFramework\Components\Visual\Card::make()->setTitle('Third') !!}
    </div>
</div>
```

Each card fades in one after the other as it enters the viewport — useful for dashboards built with [Card](../../components/visuals/card.md) or [FastCard](../../components/visuals/fastcard.md). Combine with [Loader overlay](loader_overlay.md): the loader hides the page first, then `fade-in` animates the reveal.

> Tip: `fade-in` is purely presentational — it never blocks rendering or form submission. If you need JS to run after dynamic content appears, use the [Universal observer](universal_observer.md) instead.

---

See also: [Usage](../../../usage.md), [Loader overlay](loader_overlay.md), [Universal observer](universal_observer.md), [UI basics](../../styling/basics.md).