Topics

• using @keyframes to create multi-state animations;
• reviewing a number of animation CSS properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.

Tutorials

• ADV Section 03 CSS Animations Keyframes, videos 024 – 030
• The starter code for many of these examples come from Codepens. You will need to create your own HTML/CSS files and copy/paste code from the pens to your files. The following HTML/CSS pairs will need to be uploaded to your server:
  • key-animated-text.html / key-animated-text.css
  • anim-props.html / anim-props.css (example code)
  • sun.html / sun.css (starter code)
  • anim-short.html / anim-short.css (example code)
  • loading-page.html / loading-page.css (starter code)

Problem Set

Recipe Presentation continued.

For the blog

TBD