Skip to content

w4u-public/A.css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A.css - 15KB

CSS Animation library. https://w4u-public.github.io/A.css/

Sample1

This library is using Custom Properties. Can I use var()

Usage

<head>
  <link rel="stylesheet" href="A.min.css" />
</head>
<div class="@sl-x">
  <div>A</div>
  <div>A</div>
  <div>A</div>
</div>

Mixed

<div class="@sl-x-in @sl-y-in">
  <div>A</div>
  <div>A</div>
  <div>A</div>
</div>

Sample1

Ex.

Reference

Reference site

https://w4u-public.github.io/A.css/

Key

Keys
@fd - Fade
@sl - Slide
@rt - Rotate
@sc - Scale
@fl - Flick
@bn - Bounce
@sh - Shake
@sp - Spiral
@vb - Viblate
@pr - Perspective

Global Modifier

  • 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+++

Licence

MIT