CSS Animation library. https://w4u-public.github.io/A.css/
This library is using Custom Properties. Can I use var()
<head>
<link rel="stylesheet" href="A.min.css" />
</head>
<div class="@sl-x">
<div>A</div>
<div>A</div>
<div>A</div>
</div>
<div class="@sl-x-in @sl-y-in">
<div>A</div>
<div>A</div>
<div>A</div>
</div>
https://w4u-public.github.io/A.css/
Keys |
---|
@fd - Fade |
@sl - Slide |
@rt - Rotate |
@sc - Scale |
@fl - Flick |
@bn - Bounce |
@sh - Shake |
@sp - Spiral |
@vb - Viblate |
@pr - Perspective |
- Easing
- _ease
- _ease-back
- _ease-in-back
- _ease-out-back
- _ease-expo
- _ease-in-expo
- _ease-out-expo
- _ease-circ
- _ease-in-circ
- _ease-out-circ
- _ease-in-out
- _ease-in
- _ease-out
- _ease-linear
- Repeat
- _repeat
- _repeat-2
- _repeat-3
- Speed
- _speed-up
- _speed-up+
- _speed-up++
- _speed-up+++
- _speed-down
- _speed-down+
- _speed-down++
- _speed-down+++
- Level
- _lv-up
- _lv-up+
- _lv-up++
- _lv-up+++
- _lv-down
- _lv-down+
- _lv-down++
- _lv-down+++
- Transform Origin
- _origin-t
- _origin-rt
- _origin-r
- _origin-rb
- _origin-b
- _origin-lb
- _origin-l
- _origin-lt
- Direction
- _alt
- _alt-reverse
- _reverse
- Delay
- _delay-1
- _delay-2
- _delay-3
- _delay-4
- _delay-5
- _delay-6
- Children
- _child-ascend
- _child-descend
- _child-odd
- _child-even
- _child-each
- _child-ascend-up
- _child-ascend-up+
- _child-ascend-up++
- _child-ascend-up+++
- _child-ascend-down
- _child-ascend-down+
- _child-ascend-down++
- _child-ascend-down+++
- _child-descend-up
- _child-descend-up+
- _child-descend-up++
- _child-descend-up+++
- _child-descend-down
- _child-descend-down+
- _child-descend-down++
- _child-descend-down+++
MIT