{"id":772,"date":"2014-09-15T21:49:29","date_gmt":"2014-09-16T02:49:29","guid":{"rendered":"http:\/\/art.buffalo.edu\/coursenotes\/art320\/?page_id=772"},"modified":"2025-09-30T14:05:16","modified_gmt":"2025-09-30T18:05:16","slug":"exercise-5-css-animation-interactivity","status":"publish","type":"page","link":"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-5-css-animation-interactivity\/","title":{"rendered":"Exercise 5: CSS Animation & Interactivity"},"content":{"rendered":"\n

Overview<\/h2>\n\n\n\n
\n

Animation<\/em> is the change<\/strong> in the shape<\/strong>, size<\/strong>, color<\/strong>, orientation<\/strong> or position<\/strong> of an element over time<\/strong>, in either a two- or three-dimensional direction.<\/p>\n<\/blockquote>\n\n\n\n

\n

Interactivity<\/em> is when an animation or change in the state of information occurs as a result of a user action<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n

Beyond entertainment, animation and interactivity can be used to provide visual feedback which reassures the user that their actions have achieved the desired consequence.<\/p>\n\n\n\n

Purposeful animation and interactivity can also be used to enhance the meaning<\/strong> of information being delivered.<\/p>\n\n\n\n

Animation<\/h2>\n\n\n\n

Animation is an optical illusion<\/strong> whereby sequences of still images (frames) flashed before the eyes are perceived by the brain to be connected<\/strong>, creating a sense of fluid motion<\/strong>.<\/p>\n\n\n\n

Conventional (film-based) animation displayed stills at a rate of 24 frames-per-second<\/strong> (fps). Modern digital video is commonly shot at 24<\/strong> fps to simulate a cinematic feel, 30<\/strong> fps, or 60<\/strong> fps.<\/p>\n\n\n\n

Digital animation created in apps like Adobe Animate, After Effects, or ToonBoom can be set at many different rates. Simple animation might be adequately replayed as low as 5 fps, but 12 is considered a more common minimum. If the frame rate is too low for a given sequence, the illusion will be lost at the playback will appear stroboscopic or flickering.<\/strong><\/p>\n\n\n\n

Historically, senior animators would draw “key<\/strong>” frames of an animation, and junior animators would draw the “in-between<\/strong>” frames, or “tweens<\/strong>“. In the digital world, the computer draws the tweens.<\/p>\n\n\n\n

CSS shares this concept with animation apps: You set the keyframes, and the CSS works with the browser to create the tweens.<\/p>\n\n\n\n

Animation Can Add Life to Inanimate Objects<\/h3>\n\n\n\n

For more than a century, animators have been guided by Disney’s “12 Principles of Animation”. Animation that includes these visual qualities aides our suspension of disbelief so that we can empathize with otherwise inanimate objects and illustrated characters. See “Understand Disney’s 12 Principles of Animation<\/a>” from creativebloq.com<\/a>.<\/p>\n\n\n\n

CSS Animation<\/h2>\n\n\n\n