How to Build a Shaking Bread‑Machine Game with CSS3 Animations

1 Project Background

Project requirement: Build a bread‑machine game where multiple bread pieces continuously scroll upward on layered plates, and shaking the phone randomly drops some breads.

Users keep shaking, breads keep dropping, and the machine keeps producing and scrolling new breads.

2 Implementation Idea

To achieve better performance, the key animations are implemented with

CSS3

instead of JavaScript. The overall logic is simple:

Four plates (

DIV

) repeat an upward‑moving animation.

Each plate contains three breads; when a bread needs to drop, the visible bread is hidden and a dedicated dropping bread element is shown and animated.

When a plate reaches the top and the animation restarts, the previously hidden breads are shown again.

3 Detailed Implementation and Issues

1) Repeating movement animation

All four plates share the same style (

.roll

) and use

infinite

to loop, with different delays to create evenly spaced gaps. The total travel time from bottom to top is 4 seconds.

The initial animation left a three‑second gap before the plates were fully filled. By using a negative animation delay, the plates are filled immediately:

2) Precise bread dropping

The dropping bread is a temporary DOM element, not the one originally on the plate. To align it with the hidden bread's position, the script uses

offset()

to get the current document coordinates and places the dropping bread accordingly. Since the machine only scrolls upward and the number of breads is fixed, the horizontal

left

value remains constant.

3) Re‑adding breads at the right time

After a bread drops, the hidden bread on the plate must be shown again when the current animation cycle ends. Because CSS3 animations lack a completion callback, a

setTimeout

is used. The remaining distance to the top is divided by the speed to calculate the time needed, and a timer triggers the re‑display at the correct moment.

4 Minor Optimizations

1) Performance optimization

The dropping breads are inserted as new DOM nodes, which can grow large when many breads drop simultaneously. Excessive DOM nodes affect performance, so the solution is to clean up dropped breads promptly.

Even after cleanup, frequent DOM insertions and many timers still degrade performance. A new approach reuses a fixed pool of bread DOM elements (maximum 12). When the pool is full, the oldest element is recycled instead of creating a new one.

Switching from

.children()

and

.eq()

selectors to ID selectors further improves speed.

2) Compatibility issues

Some older phones lack a gyroscope, which is required for the shake‑to‑drop mechanic. For such devices, the script automatically drops two breads per second as a fallback, ensuring the game remains playable.

Overall, these techniques enable a smooth, responsive bread‑machine game that works well on modern mobile browsers.