项目作者: w4u-public

项目描述 :
CSS Animation library
高级语言: CSS
项目地址: git://github.com/w4u-public/A.css.git
创建时间: 2017-11-14T15:00:31Z
项目社区:https://github.com/w4u-public/A.css

开源协议:MIT License

下载


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

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

Mixed

  1. <div class="@sl-x-in @sl-y-in">
  2. <div>A</div>
  3. <div>A</div>
  4. <div>A</div>
  5. </div>

Sample1

Ex.

  • @sl-x&_speed-up++&_lv-up+&_ease-out-back&@fd&@sc-x-in!">Swoosh
  • @bn-x&_origin-b&@bn-y!&@sl-y&@fl-y-in">Jelly
  • @rt-y&_child-ascend&@pr-in&@fd">Wind
  • @pr-in&_child-ascend&_ease-out-back&@fd&@sc-in!">Gather

Reference

Reference site

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

Key

Keys
@fd"">@fd - Fade
@sl-x"">@sl - Slide
@rt-x"">@rt - Rotate
@sc-x"">@sc - Scale
@fl-x"">@fl - Flick
@bn"">@bn - Bounce
@sk-x"">@sh - Shake
@sp-x"">@sp - Spiral
@vb"">@vb - Viblate
@pr-in"">@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