Animation动画 ·

CSS-only Pendulum

A swinging pendulum built from a single `<div>` and a four-second animation curve.

CSS · transform-origin · cubic-bezier

No JavaScript. The pendulum below is one <div> rotated by a keyframe animation timed to a soft cubic-bezier so it spends most of its time at the apex — like a real pendulum decelerating against gravity.

Why it works

The key is the cubic-bezier curve (0.5, 0, 0.5, 1). With that shape the animation slows down at both ends — a passable approximation of pendulum physics for casual viewing. A real pendulum’s motion is cos(t); this is “close enough that you don’t notice.”

prefers-reduced-motion cancels the swing for users who don’t want it.