Interactive Animations with CSS and JavaScript

Learn how to choose the correct mix of HTML, JavaScript, CSS, and other assets to deliver polished web-based animations.

Introduction

• Beyond Flash: Creating animations for the modern web
• What you should know

1. Building a Foundation

• Storyboarding
• Scene elements
• Animation strategies
• Set up your environment

2. HTML Layout

• HTML custom elements
• Responsive CSS with view units
• Create a square with CSS vmin
• Center element with CSS margins
• Center element CSS flexbox
• Create a dynamic layout with flexbox

3. Interactivity with JavaScript

• CSS selector specificity
• Add a JavaScript event handler
• Navigating the DOM

4. Adding Animation

• Animation setup
• CSS @keyframes
• Easing
• Auto-advance with JavaScript
• Control animations with classes
• Animate visibility
• We need a montage
• Adding an animationend event handler
• Animating with CSS transitions
• Targeted animations using IDs
• Manipulating DOM with JavaScript
• Randomize slide displays
• Set timing for transitions

5. Working with SVG

• The DOM is everything
• Manipulating SVG with JavaScript
• Applying CSS to SVG
• Fit and finish

6. Conclusion

• Next steps