# animation

The markup of every demo on <https://kuiper.oeds.it/animation/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## animation-*

Varies: the `animation-slide-bottom-*` ladder over 2 rungs, `s` to `m`.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-fade button button-l button-muted width-1-1">fade</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-kenburns button button-l button-muted width-1-1">kenburns</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-scale-down button button-l button-muted width-1-1">scale-down</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-scale-up button button-l button-muted width-1-1">scale-up</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-shake button button-l button-muted width-1-1">shake</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-bottom button button-l button-muted width-1-1">slide-bottom</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-bottom-m button button-l button-muted width-1-1">slide-bottom-m</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-bottom-s button button-l button-muted width-1-1">slide-bottom-s</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-left button button-l button-muted width-1-1">slide-left</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-left-m button button-l button-muted width-1-1">slide-left-m</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-left-s button button-l button-muted width-1-1">slide-left-s</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-right button button-l button-muted width-1-1">slide-right</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-right-m button button-l button-muted width-1-1">slide-right-m</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-right-s button button-l button-muted width-1-1">slide-right-s</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-top button button-l button-muted width-1-1">slide-top</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-top-m button button-l button-muted width-1-1">slide-top-m</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-slide-top-s button button-l button-muted width-1-1">slide-top-s</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card overflow-hidden animation-toggle"><button class="animation-spinner-rotate button button-l button-muted width-1-1">spinner-rotate</button></div></div>
</div>
```