Keys-Animations.css

Press keys on your keyboard to interact with the examples below!

Hover over any example to see the code

Press Animations

Press ANY KEY to trigger

Pulse

<div class="keys-pulse" data-keys>
  <span class="keys-target">Pulse</span>
</div>

Shake

<div class="keys-shake" data-keys>
  <span class="keys-target">Shake</span>
</div>

Bounce

<div class="keys-bounce" data-keys>
  <span class="keys-target">Bounce</span>
</div>

Glow

<div class="keys-glow" data-keys>
  <span class="keys-target">Glow</span>
</div>

Flash

<div class="keys-flash" data-keys>
  <span class="keys-target">Flash</span>
</div>

Arrow Key Animations

Press ↑ ↓ ← → arrow keys

Arrow Up

<div class="keys-arrow-up" data-keys-prevent="up" data-keys
     data-keys-watch="up">
  <span class="keys-target">Arrow Up</span>
</div>

Arrow Down

<div class="keys-arrow-down" data-keys-prevent="down" data-keys
     data-keys-watch="down">
  <span class="keys-target">Arrow Down</span>
</div>

Arrow Left

<div class="keys-arrow-left" data-keys
     data-keys-watch="left">
  <span class="keys-target">Arrow Left</span>
</div>

Arrow Right

<div class="keys-arrow-right" data-keys
     data-keys-watch="right">
  <span class="keys-target">Arrow Right</span>
</div>

WASD Movement

Press W A S D keys

WASD Up (W)

<div class="keys-wasd-up" data-keys
     data-keys-watch="w">
  <span class="keys-target">WASD Up</span>
</div>

WASD Down (S)

<div class="keys-wasd-down" data-keys
     data-keys-watch="s">
  <span class="keys-target">WASD Down</span>
</div>

WASD Left (A)

<div class="keys-wasd-left" data-keys
     data-keys-watch="a">
  <span class="keys-target">WASD Left</span>
</div>

WASD Right (D)

<div class="keys-wasd-right" data-keys
     data-keys-watch="d">
  <span class="keys-target">WASD Right</span>
</div>

Specific Key Animations

Press the key indicated on each box

Space Jump

<div class="keys-space-jump" data-keys-prevent="space" data-keys
     data-keys-watch="space">
  <span class="keys-target">Space Jump</span>
</div>

Enter Confirm

<div class="keys-enter-confirm" data-keys
     data-keys-watch="enter">
  <span class="keys-target">Enter Confirm</span>
</div>

Escape Fade

<div class="keys-escape-fade" data-keys
     data-keys-watch="esc">
  <span class="keys-target">Escape Fade</span>
</div>

Tab Switch

<div class="keys-tab-switch" data-keys-watch="tab" data-keys
     data-keys-watch="tab">
  <span class="keys-target">Tab Switch</span>
</div>

Typing Animations

Type anything on your keyboard

Typing Glow

<div class="keys-typing-glow" data-keys>
  <span class="keys-target">Typing Glow</span>
</div>

Typing Scale

<div class="keys-typing-scale" data-keys>
  <span class="keys-target">Typing Scale</span>
</div>

Combo Animations

Press multiple keys simultaneously

Ctrl+Shift Flash

<div class="keys-combo-flash" data-keys
     data-keys-combo="ctrl+shift">
  <span class="keys-target">Combo Flash</span>
</div>

Ctrl+Alt Spin

<div class="keys-combo-spin" data-keys
     data-keys-combo="ctrl+alt">
  <span class="keys-target">Combo Spin</span>
</div>

Shift+Space Burst

<div class="keys-combo-burst" data-keys-prevent="space" data-keys
     data-keys-combo="shift+space">
  <span class="keys-target">Combo Burst</span>
</div>

Rotation Animations

Press R to rotate (each press rotates 90°)

Rotate on R

<div class="keys-rotate-r" data-keys
     data-keys-watch="r" data-keys-var="true">
  <span class="keys-target">Rotate on R</span>
</div>

Continuous Rotation

<div class="keys-rotate-continuous" data-keys>
  <span class="keys-target">Continuous</span>
</div>

Color Effects

Press any keys to change colors

Color Shift

<div class="keys-color-shift" data-keys
     data-keys-var="true">
  <span class="keys-target">Color Shift</span>
</div>

Brightness Pulse

<div class="keys-brightness-pulse" data-keys>
  <span class="keys-target">Brightness</span>
</div>

Fade In

<div class="keys-fade-in" data-keys>
  <span class="keys-target">Fade In</span>
</div>

Customize Animations

All animations can be customized using CSS variables:

.keys-active {
    --keys-delay: 0s;
    --keys-duration: 0.3s;
    --keys-blend: ease-out;
    --keys-direction: normal forwards;
    --keys-intensity: 1;
}

Example usage:

<div class="keys-pulse" data-keys
     style="--keys-duration: 0.5s; --keys-delay: 0.2s;">
  <span class="keys-target">Custom Timing</span>
</div>

← Back to Documentation