Animadio Doc


Animadio Logo

States Usage

To use States feature, you need to add the States keyword(s) after the States class(es) with a hyphens "-" between them in order to get the desired effect.

States CDN
States Datas
Keywords Trigger Relay Target
Class Class
global Global class Children of Global class
into Hover|Focus the parent of Into class Into class
onto Hover|Focus the Onto class Onto class
toall Hover|Focus the Toall class Children of Toall class
toone Hover|Focus a child of Toone class Child of Toone class
check + hub + goal Check class Checked Hub class Goal class
radio1 + relay + target1 Radio1 class Checked Relay class Target1 class
radio2 + relay + target2 Radio2 class Checked Relay class Target2 class
radio3 + relay + target3 Radio3 class Checked Relay class Target3 class
radio4 + relay + target4 Radio4 class Checked Relay class Target4 class
radio5 + relay + target5 Radio5 class Checked Relay class Target5 class

States Examples

  • Anima class
    <section class="anima-rota3d">
        <!-- To get a rotate3d animation -->
  • Global Bg class & Global Color class
    <section class="bg-purple-global color-green-global">
        <!-- To get a purple background & green color
        on all direct children -->
  • Into Bord class & Onto Deco class
    <section class="bord-solid-into deco-over-onto">
        <!-- To get a solid border
        when the parent is hover or focus
       & an overline text-decoration when the element is hover or focus -->
  • Toall Display class & Toone position class
    <section class="block-md-toall absolute-toone">
        <!-- To get a display block to all direct children
        when hover or focus the parent after 768px
        & a position absolute all the time to each children one by one
        when hover or focus each of them -->