Emotion Through CSS
summary
Argues that CSS can convey real emotion by using animation principles boiled down to anticipation, timing, exaggeration, appeal and demonstrates concrete techniques: pure CSS keyframes with translates and ease-in-out to animate buttons and inputs. Builds happy, angry, and sad buttons and runs a small user test with five test participants: happy and angry are correctly identified by all five, sad is ambiguous. Also ships subtle patterns like a coughing button and a “zen” input that quietly signals attention.
AI-written summary · about
chapters (14)
- 0:00Start
- 11:15BEYOND THE SHOWCASE
- 13:22EMOTIONAL BUTTONS
- 14:00TEST CONDITIONS
- 18:23THE TESTS
- 19:10HAPPY BUTTON : 5 rushed, excited or anxious too
- 19:33ANGRY BUTTON : 5 annoyed
- 19:52SAD BUTTON : 5 stoned and sleepy, reluctant, bored
- 20:27Happy and angry... "Reminds me of my kid"
- 20:38THAT'S CUTE BUT...
- 20:56INVISIBLE ANIMATION
- 21:38SOME MORE EXPERIMENTS
- 22:27ZEN INPUTS
- 23:08FEEDBACK
