Keyframes

AliasCSS provides custom attribute 'keyframes-[name]' which can be used to define CSS keyframes declaration.

      <div  class="bgc-ecf0f1 oh w-100p h-100px pa t-0 l-0 df aic acc jcc zi-100000" 
        keyframes-loading="@100-transform-scale2 @100-border-color-gray600">
            <span class="dot" class-dot="br-100p b-5px-solid-555 m-10px an-loading adu-0d6s atf-eio ada aici "></span>
            <span class="dot adl-0d2s"></span>
            <span class="dot adl-0d4s  "></span>
        </div>

Usage

With usingkeyframes-[name] we can define simple animation very easily

<!-- Flash -->
 <h1 keyframes-flash='@[0,50,100]-o-1 @[25,75]-o-0'  class="an-flash adu2s">Flash!</h1>
 
 <!-- Flash using full sementaic className -->
 <h1 keyframes-flash='@[0,50,100]-opacity-1 @[25,75]-opacity-0'  class="animation-name-flash animation-duration-2s">Flash!</h1>

Syntax: keyframes-[animation-name]="@[percentage]-aliasccs @[percentage]-aliasccs @[percentage]-aliasccs" E.g

<div keyframes-fadeOut="@0-opacity-1 @100-opacity-0" class="an-fadeOut adu-1s">Fade Out</div>

Class Group Npm Guide