AliasCSS Inline 3D Anmation

Continuous 3-Axis Multi-Frequency Field

Keyframes & Animations

AliasCSS provides an in-markup domain-specific language (DSL) for defining native CSS animations without touching external stylesheets or configuration files. Through the keyframes-[name] attribute and modular animation utilities, complex multi-step timelines, multi-axis 3D transforms, and accessible reduced-motion fallbacks are authored directly on the element.

In-Line Keyframe Definition (`keyframes-[name]`)

Keyframe timelines are authored directly in markup using the keyframes-[name] attribute. Inside this attribute, timeline steps are defined with atomic utilities or grouped utility bundles ([...]):


<div
  keyframes-pulseGlow="
    @0-[transform-scale-1,box-shadow-0px-0px-0px-000000/0]
    @50-[transform-scale-1.05,box-shadow-0px-0px-30px-6366f1/0.4]
    @100-[transform-scale-1,box-shadow-0px-0px-0px-000000/0]
  "
  class="an-pulseGlow adu-3s atf-linear aici @motion-reduce-an-none"
>
  Pulsing Glow Surface
</div>

Compiled CSS Output


@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0px 0px 30px rgba(99, 102, 241, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }
}
 
.an-pulseGlow { animation-name: pulseGlow; }
.adu-3s { animation-duration: 3s; }
.atf-linear { animation-timing-function: linear; }
.aici { animation-iteration-count: infinite; }
 
@media (prefers-reduced-motion: reduce) {
  .\@motion-reduce-an-none {
    animation-name: none;
  }
}

Timeline Step Grammar

Inside the keyframes-[name] attribute, timeline steps accept single declarations, grouped brackets, or grouped percentage steps:

Pattern	Rule Emitted	Concrete Example	Native CSS Equivalent
`@step-utility`	Single property at single step	`@0-opacity-0`	`0% { opacity: 0; }`
`@step-[u1, u2]`	Grouped properties at single step	`@0-[tf-ty-0,opacity-0]`	`0% { transform: translateY(0); opacity: 0; }`
`@[s1, s2]-utility`	Single property at multiple steps	`@[0,100]-opacity-1`	`0%, 100% { opacity: 1; }`
`@[s1, s2]-[u1, u2]`	Grouped properties at multiple steps	`@[25,75]-[display-none,transform-scale-0.5]`	`25%, 75% { display: none; transform: scale(0.5); }`

Multi-Percentage Grouping Example


<div
  keyframes-flash="
    @[0,50,100]-display-flex
    @[25,75]-[display-none,transform-scale-0.5]
  "
  class="an-flash adu-2s aici"
>
  Flash Indicator
</div>

Animation Control Utilities

AliasCSS provides both semantic and shorthand utility classes to bind and configure animation playback:

Shorthand	Semantic Utility	Compiled CSS Declaration
`an-[name]`	`animation-name-[name]`	`animation-name: [name];`
`adu-[time]`	`animation-duration-[time]`	`animation-duration: [time];`
`adl-[time]`	`animation-delay-[time]`	`animation-delay: [time];`
`atf-[easing]`	`animation-timing-function-[easing]`	`animation-timing-function: [easing];`
`atf-linear`	`animation-timing-function-linear`	`animation-timing-function: linear;`
`atf-eio`	`animation-timing-function-ease-in-out`	`animation-timing-function: ease-in-out;`
`aici`	`animation-iteration-count-infinite`	`animation-iteration-count: infinite;`
`ada`	`animation-direction-alternate`	`animation-direction: alternate;`
`afmbo`	`animation-fill-mode-both`	`animation-fill-mode: both;`
`afm-forwards`	`animation-fill-mode-forwards`	`animation-fill-mode: forwards;`
`aps-paused`	`animation-play-state-paused`	`animation-play-state: paused;`
`aps-running`	`animation-play-state-running`	`animation-play-state: running;`

3D Transform Chaining inside Keyframes (`__`)

Combine 2D and 3D transform functions inside timeline steps using the double underscore (__) delimiter. Negative angles or translation coordinates use a double hyphen (--):


<div
  keyframes-orbit="
    @0-[tf-rotateX-65deg__rotateY-0deg__rotateZ-0deg]
    @100-[tf-rotateX-65deg__rotateY-0deg__rotateZ-360deg]
  "
  class="an-orbit adu-10s atf-linear aici"
>
  Orbiting Node
</div>

Accessibility: Reduced Motion Scope

To comply with WCAG accessibility requirements, attach the @motion-reduce- scope wrapper to override active animations when a user has enabled motion reduction in their system settings:


<div
  keyframes-spin="@0-transform-rotate-0 @100-transform-rotate-360deg"
  class="an-spin adu-1s atf-linear aici @motion-reduce-an-none"
>
  Spinning Progress Ring
</div>

Compiled CSS output:


.an-spin {
  animation-name: spin;
}
 
@media (prefers-reduced-motion: reduce) {
  .\@motion-reduce-an-none {
    animation-name: none;
  }
}

Modern Extensions: Scroll-Driven Animations

For scroll-driven animations, bind timeline progression directly to document or container scroll offsets using standard property-value utilities:


<div class="an-progress animation-timeline-scroll-root animation-range-entry-0%-exit-100%">
  Scroll Progress Bar
</div>

Compiled CSS output:


.animation-timeline-scroll-root {
  animation-timeline: scroll(root);
}
.animation-range-entry-0\%-exit-100\% {
  animation-range: entry 0% exit 100%;
}


<div class="mh-50vh d-flex ai-center jc-center bgc-0f0c29 background(linear-gradient(135deg,#0f0c29,#302b63,#24243e))_">
 
    <!-- Scene wrapper: enables 3D perspective -->
    <div class="w-200px h-200px d-flex ai-center jc-center perspective-600px">
 
        <!-- Cube root: preserve-3d + spin animation -->
        <div keyframes-spin="@0-[tf-rotateX-20deg__rotateY-0deg] @100-[tf-rotateX-20deg__rotateY-360deg]" class="pr w-120px h-120px transform-style-preserve-3d an-spin adu-8s atf-linear aici">
      
            <!-- Front -->
            <div class="
              [pa,w-120px,h-120px,bgc-white/0.06,b-1px-s-white/0.35,br-6px,bf-blur-6px]--as-cube-face
              cube-face
              tf-translateZ-60px
            "></div>
 
            <!-- Back -->
            <div class="cube-face tf-rotateY-180deg__translateZ-60px"></div>
 
            <!-- Left -->
            <div class="cube-face tf-rotateY--90deg__translateZ-60px "></div>
 
            <!-- Right -->
            <div class="cube-face tf-rotateY-90deg__translateZ-60px"></div>
 
            <!-- Top -->
            <div class="cube-face tf-rx-90deg__tz-60px"></div>
 
            <!-- Bottom -->
            <div class="cube-face tf-rotateX--90deg__translateZ-60px"></div>
 
        </div>
    </div>
 
</div>

Live pattern example


<div
  class="bgc-ecf0f1 oh w-100p h-100px pa t-0 l-0 df aic acc jcc"
  keyframes-loading="@100-transform-scale-2 @100-border-color-gray600"
>
  <span class="[br-100%,b-5px-solid-555,m-10px,an-loading,adu-0.6s,atf-eio,ada,aici]--as-dot dot"></span>
  <span class="dot adl-0.2s"></span>
  <span class="dot adl-0.4s"></span>
</div>

This pattern works well for loaders because you can define the motion once, then create variation through standard animation utilities such as delay and duration.

20 useful animations

Fade

1. Fade in


<div 
keyframes-fadeIn="@0-opacity-0 @100-opacity-1" class="an-fadeIn adu-300ms">
  Fade In
</div>

2. Fade out


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

3. Flash


<div 
keyframes-flash="@0-opacity-1 @100-opacity-0" 
class="an-flash adu-1s">
  Flash
</div>

4. Blink


<div 
keyframes-blink="@0-opacity-1 @50-opacity-0 @100-opacity-1" 
class="an-blink adu-1s">
  Blink
</div>

Slide

5. Slide up


<div 
keyframes-slideUp="@0-tf-ty-20px @100-tf-ty-0" 
class="an-slideUp adu-400ms">
  Slide Up
</div>

6. Slide down


<div 
keyframes-slideDown="@0-tf-ty--20px @100-tf-ty-0" 
class="an-slideDown adu-400ms">
  Slide Down
</div>

7. Slide in from left


<div 
keyframes-slideLeft="@0-tf-tx--24px @100-tf-tx-0" 
class="an-slideLeft adu-400ms">
  Slide Left
</div>

8. Slide in from right


<div 
keyframes-slideRight="@0-tf-tx-24px @100-tf-tx-0" 
class="an-slideRight adu-400ms">
  Slide Right
</div>

9. Drop in


<div 
keyframes-dropIn="@0-[tf-ty--30px,opacity-0] @100-[tf-ty-0,opacity-1]" 
class="an-dropIn adu-400ms">
  Drop In
</div>

Scale

10. Scale in


<div 
keyframes-scaleIn="@0-transform-scale-0.9 @100-transform-scale-1" 
class="an-scaleIn adu-250ms">
  Scale In
</div>

11. Scale out


<div 
keyframes-scaleOut="@0-transform-scale-1 @100-transform-scale-0.9" 
class="an-scaleOut adu-250ms">
  Scale Out
</div>

12. Pop


<div 
keyframes-pop="@0-[transform-scale-0.8,opacity-0] @80-[transform-scale-1.05,opacity-1] @100-[transform-scale-1,opacity-1]" 
class="an-pop adu-350ms">
  Pop
</div>

13. Pulse


<div 
keyframes-pulse="@0-transform-scale-1 @50-transform-scale-1.05 @100-transform-scale-1" 
class="an-pulse adu-1s">
  Pulse
</div>

14. Heartbeat


<div 
keyframes-heartbeat="@0-transform-scale-1 @14-transform-scale-1.08 @28-transform-scale-1 @42-transform-scale-1.08 @70-transform-scale-1" 
class="an-heartbeat adu-1s">
  Heartbeat
</div>

Motion

15. Bounce


<div 
keyframes-bounce="@0-tf-ty-0 @40-tf-ty--12px @60-tf-ty-0 @80-tf-ty--6px @100-tf-ty-0" 
class="an-bounce adu-700ms">
  Bounce
</div>

16. Float


<div 
keyframes-float="@0-tf-ty-0 @50-tf-ty--8px @100-tf-ty-0" 
class="an-float adu-2s">
  Float
</div>

17. Spin


<div 
keyframes-spin="@0-transform-rotate-0 @100-transform-rotate-360deg" 
class="an-spin adu-1s">
  Spin
</div>

18. Rotate in


<div 
keyframes-rotateIn="@0-[transform-rotate--12deg,opacity-0] @100-[transform-rotate-0,opacity-1]" 
class="an-rotateIn adu-400ms">
  Rotate In
</div>

Attention

19. Shake


<div 
keyframes-shake="@0-tf-tx-0 @25-tf-tx--4px @50-tf-tx-4px @75-tf-tx--4px @100-tf-tx-0" 
class="an-shake adu-400ms">
  Shake
</div>

20. Wiggle


<div keyframes-wiggle="@0-transform-rotate-0 @25-transform-rotate--6deg @50-transform-rotate-6deg @75-transform-rotate--3deg @100-transform-rotate-0" 
class="an-wiggle adu-600ms">
  Wiggle
</div>

Naming conventions

Use animation names that describe behavior, not implementation details.

Good names

fadeIn
slideUp
pop
shake
loading

Avoid

anim1
testMotion
boxMove2
tempKeyframe

Good naming matters because the animation name becomes part of the component API.

Recommended utility pairings

These utilities commonly work well with keyframes-[name]:

Utility	Meaning
`an-*`	`animation-name`
`adu-*`	`animation-duration`
`adl-*`	`animation-delay`
`atf-*`	`animation-timing-function`
`ada`	likely animation direction or alternate mode, depending on your AliasCSS mapping
`aici`	likely animation iteration count, depending on your AliasCSS mapping
`afmbo`	likely animation fill mode, depending on your AliasCSS mapping

AliasCSS Inline 3D Anmation

Keyframes & Animations

In-Line Keyframe Definition (keyframes-[name])

Compiled CSS Output

Timeline Step Grammar

Multi-Percentage Grouping Example

Animation Control Utilities

3D Transform Chaining inside Keyframes (__)

Accessibility: Reduced Motion Scope

Modern Extensions: Scroll-Driven Animations

Live pattern example

20 useful animations

Fade

Fade

1. Fade in

2. Fade out

3. Flash

4. Blink

Slide

Slide

5. Slide up

6. Slide down

7. Slide in from left

8. Slide in from right

9. Drop in

Scale

Scale

10. Scale in

11. Scale out

12. Pop

13. Pulse

14. Heartbeat

Motion

Motion

15. Bounce

16. Float

17. Spin

18. Rotate in

Attention

Attention

19. Shake

20. Wiggle

Naming conventions

Good names

Avoid

Recommended utility pairings

In-Line Keyframe Definition (`keyframes-[name]`)

3D Transform Chaining inside Keyframes (`__`)