CSS Shake Effect

Once again, CSS surprises us. There’s a ton of cool stuff we can do with CSS that previously had to use javascript or Flash. Hover over the image below, and see it shake back and forth. Seems like a small thing, but it’s pretty awesome from a coding perspective. The shaking isn’t the only cool thing about this face…it’s not a traditional image! It’s created entirely with code. Here’s a sample:

.901" stop-color="#F15B24" /> <stop offset=".91" stop-color="#F15A24" /> </radialGradient> <ellipse fill="url(#a)" cx="107.3" cy="166.7" rx="99.4" ry="119.4" /> <path fill="#491600" d="M15.7 126.2s9.1-52.8 76.9-63.3c0 0 3.5-29.1-8.1-55.3 0 0-1.2 6.7-1.7 12.5s-2.1 11.2-2.1 11.2-2.6-7.6-7.1-10.3c0 0-1.1 7-.5 11.7 0 0-18.2 2.7-33.5 17.1 0 0-3.2.3-4.5.7 0 0-.3 4.2 2.4 7.1 0 0-2.9-3.1-9-2.8 0 0 1 4.6 3.6 6.4 0 0-2.1-1.2-4.1-.9.1 0-21.2 26.5-12.3 65.9z" />

See the original CodePen here. Great stuff!