DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Baby Monsters — 10 Idle Animations with Code

#css #animation #showdev #pixelart

Try them live — All 10 baby monsters are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Elemental Eggs, Pixel Art Box-Shadow Basics.

The eggs have hatched! Each of the 10 elemental eggs from the previous post becomes a baby monster with a unique idle animation — floating, hopping, swaying, flapping, shivering, and pulsing. All built with the same box-shadow pixel art technique.

The Idle Animation Pattern

Each baby monster has a 2-frame idle cycle (0%/100% + 50%) using ease-in-out infinite. The personality comes from:

Idle Type Transform Effect
Float translateY(-2px) Gentle hover
Hop translateY(-4px) Energetic bounce
Bob translateY(-3px) Aquatic drift
Sway rotate(3deg) Plant-like tilt
Flap translateY(-2px) + wing pixels change Wing spread
Shiver translateX(±1px) Cold tremor
Dig translateY(+2px) Downward burrow
Pulse scale(1.05) + glow expansion Energy burst
Flutter translateY(-3px) + pixel removal Wing fold

221. Fire Lizard Baby

Tiny fire lizard with flickering tail flame — a gentle floating idle.

See it live on CSSKit — baby fire lizard animation

How It Works

At the 50% keyframe, two things happen: (1) the entire sprite lifts translateY(-2px) creating a gentle float, and (2) foot pixels shift — 1px 7px #b91c1c changes to 0px 7px #b91c1c (left foot shifts left by 1px), simulating a weight shift. The tail flame pixels at the top stay constant. Orange drop-shadow(0 0 4px) provides ambient ember glow.

.babyFireLizard {
  --bfl-speed: 0.8s;
  --bfl-scale: 3;
  --bfl-glow: #f97316;
  width: 1px;
  height: 1px;
  transform: scale(var(--bfl-scale));
  filter: drop-shadow(0 0 4px var(--bfl-glow));
  animation: bfl-idle var(--bfl-speed) ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

Colors: #f97316 (orange flame), #ef4444 (red body), #dc2626 (dark red lower), #164e63 (teal eyes).

<div class="babyFireLizard"></div>
Enter fullscreen mode Exit fullscreen mode

222. Water Turtle Baby

Tiny turtle with bobbing animation — aquatic drift with retracting limbs.

See it live on CSSKit — baby water turtle animation

How It Works

At 50%, translateY(-3px) bobs the turtle upward. Meanwhile, 2 of the 4 foot pixels at row 8 disappear — simulating limbs pulling into the shell during the bob. The slow 1.2s timing gives it a calm, aquatic feel. Blue shell uses three shades for depth.

.babyWaterTurtle {
  --bwt-speed: 1.2s;
  --bwt-scale: 3;
  --bwt-glow: #3b82f6;
  animation: bwt-bob var(--bwt-speed) ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

Colors: #3b82f6 (blue head/limbs), #1d4ed8 (dark shell), #60a5fa (light feet), #22d3ee (cyan eye highlight).

<div class="babyWaterTurtle"></div>
Enter fullscreen mode Exit fullscreen mode

223. Grass Bulb Baby

Tiny plant with swaying leaves — the only one using rotation instead of translation.

See it live on CSSKit — baby grass bulb animation

How It Works

At 50%, rotate(3deg) tilts the entire plant clockwise — like a gentle breeze. Leaf-tip pixels at the top shift from #22c55e to #4ade80 (lighter green), creating a shimmering effect. The 1.5s timing makes it the slowest baby, giving a calm, plant-like sway.

.babyGrassBulb {
  --bgb-speed: 1.5s;
  --bgb-scale: 3;
  --bgb-glow: #22c55e;
  animation: bgb-sway var(--bgb-speed) ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

Colors: #22c55e (green body), #4ade80 (light leaf tips), #16a34a (dark green lower), #15803d (trunk base).

<div class="babyGrassBulb"></div>
Enter fullscreen mode Exit fullscreen mode

224. Electric Mouse Baby

Tiny mouse with hop and sparky cheeks — the most energetic idle.

See it live on CSSKit — baby electric mouse animation

How It Works

At 50%, three things happen simultaneously: (1) translateY(-4px) — the highest jump of any baby, (2) middle foot pixels at row 9 disappear (feet leave ground), and (3) drop-shadow expands from 0 0 4px to 0 0 10px — a lightning glow pulse. The fast 0.6s timing makes it feel hyperactive. Cyan cheeks (#22d3ee) and pink mouth (#f472b6) add personality.

.babyElectricMouse {
  --bem-speed: 0.6s;
  --bem-scale: 3;
  --bem-glow: #facc15;
  animation: bem-hop var(--bem-speed) ease-in-out infinite;
}

@keyframes bem-hop {
  0%, 100% {
    box-shadow: /* full sprite with 4 feet pixels */;
  }
  50% {
    box-shadow: /* sprite with only 2 feet pixels */;
    transform: scale(var(--bem-scale)) translateY(-4px);
    filter: drop-shadow(0 0 10px var(--bem-glow));
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="babyElectricMouse"></div>
Enter fullscreen mode Exit fullscreen mode

225. Dark Bat Baby

Tiny bat with flapping wings — fastest animation at 0.5s.

See it live on CSSKit — baby dark bat animation

How It Works

At 50%, wing pixels spread outward — pixels at rows 5-6 shift from 1px/5px-6px to 0px/6px-7px positions, extending the wingspan by 1 pixel on each side. The lower body pixels at row 7 disappear during the flap. translateY(-2px) adds a slight lift. The 0.5s speed creates rapid wing beats.

<div class="babyDarkBat"></div>
Enter fullscreen mode Exit fullscreen mode

Colors: #7c3aed (purple body/wings), #6d28d9 (dark wing edges), #fbbf24 (yellow eyes).

226–230. More Baby Monsters

226. Ice Seal Baby — Shivering animation with 4 keyframe stops (0%, 25%, 50%, 75%). At 25% it shifts +1px right, at 75% it shifts -1px left, creating a horizontal tremble. At 50%, the entire body palette swaps from icy blues to pure white #ffffff — a frost-flash shimmer effect. Unique among babies for using horizontal movement instead of vertical.

@keyframes bis-shiver {
  0%, 100% { /* normal icy blue pixels */ }
  25% { transform: scale(var(--bis-scale)) translateX(1px); }
  50% { box-shadow: /* white flash pixels */; }
  75% { transform: scale(var(--bis-scale)) translateX(-1px); }
}
Enter fullscreen mode Exit fullscreen mode

227. Psychic Eye Baby — Pulsing glow + scale throb. At 50%, body color shifts from deep fuchsia #d946ef to lighter #e879f9, glow expands from 6px to 14px drop-shadow, and scale bumps to 1.05×. The eye area (#f0abfc) stays constant while the body "pulses" with psychic energy. Slowest at 1.5s.

228. Earth Mole Baby — Digging bob with downward motion. At 50%, the sprite moves translateY(+2px) — the only baby that moves downward instead of up, simulating burrowing. Upper body shifts from dark brown #a16207 to golden #ca8a04 (dirt churning effect). Yellow eyes (#fef08a) stay bright.

229. Wind Bird Baby — Wing flutter with pixel removal. At 50%, light-gray wing-tip pixels drop from 6 to 4 visible (2 pixels disappear), simulating wings folding inward. translateY(-3px) lifts the bird. Fastest animation at 0.4s. No color swap — purely structural pixel removal.

230. Light Fairy Baby — The most complex idle, combining 4 effects: (1) head pixels flash from cream #fef9c3 to white #ffffff, (2) glow expands from 6px to 14px, (3) translateY(-3px) float, and (4) scale(1.05) throb — all at 50%. Creates a divine twinkle effect.

Baby Monster Idle Comparison

# Monster Idle Type Move Color Shift Glow Expand Speed
221 Fire Lizard Float -2px up No No 0.8s
222 Water Turtle Bob -3px up No No 1.2s
223 Grass Bulb Sway rotate 3deg Green→lighter No 1.5s
224 Electric Mouse Hop -4px up No 4px→10px 0.6s
225 Dark Bat Flap -2px up Wing spread No 0.5s
226 Ice Seal Shiver ±1px horizontal Blue→white No 1.0s
227 Psychic Eye Pulse No (scale 1.05×) Fuchsia→lighter 6px→14px 1.5s
228 Earth Mole Dig +2px down Brown→golden No 0.8s
229 Wind Bird Flutter -3px up Wing pixels vanish No 0.4s
230 Light Fairy Twinkle -3px up + 1.05× Cream→white 6px→14px 1.0s

What's Next?

That covers all 10 baby monsters from CSSKit. In the next posts, these babies grow into battle monsters and eventually elemental dragons — larger, more detailed pixel art sprites with attack animations.

Explore all 310 animations live at CSSKit or star the repo on GitHub.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)