Attention
Wobble Animation
Lurches side to side while tilting.
Card title
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.wobble {
transform: translate3d(130px, 90px, 0);
box-shadow: 0px 10px 30px 0px #00000059;
width: 220px;
height: 140px;
background: #1c1e2a;
border-radius: 18px;
color: #e7e9ee;
font-size: 14px;
animation: wobble-anim 900ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes wobble-anim {
0% {
transform: translate3d(130px, 90px, 0);
animation-timing-function: ease-in-out;
}
15% {
transform: translate3d(105px, 90px, 0) rotate(-5deg);
animation-timing-function: ease-in-out;
}
30% {
transform: translate3d(150px, 90px, 0) rotate(3deg);
animation-timing-function: ease-in-out;
}
45% {
transform: translate3d(115px, 90px, 0) rotate(-3deg);
animation-timing-function: ease-in-out;
}
60% {
transform: translate3d(140px, 90px, 0) rotate(2deg);
animation-timing-function: ease-in-out;
}
75% {
transform: translate3d(125px, 90px, 0) rotate(-1deg);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(130px, 90px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.wobble {
animation: none;
transition: none;
}
}Why it is built this way
Translation and rotation together, which is the difference between a wobble and a shake. Good for a heavier element where a pure shake would look weightless.
What it animates
2 properties across 1 CSS declaration. The bar shows when each one is moving.
transformtransformWhat it costs to run
Rotate and x is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.90s across 14 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a card. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — rotate and x move over 0.90s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.