ImagesLesson 91Free preview

Shake an Image

This lesson is part of How To · All levels

Summary

A shake image is a vibrational animation that focuses on a particular image or button. Animations are created with @keyframes that shift elements to the left and right alternately. The effect should be brief and respectful of user preferences that reduce movement.

Key points

@keyframes defines the stages of animation from start to finish.
Animation connects elements with keyframes and their duration.
TranslateX shifts the elements left and right to create vibrations.
Animation-iteration-count: infinity makes animation repeat itself continuously.
Motion-reduced preferences are used to turn off animation for users who are sensitive to motion.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.