Interactive Animations with CSS and JavaScript

Go to class
Write Review

Free Online Course: Interactive Animations with CSS and JavaScript provided by LinkedIn Learning is a comprehensive online course, which lasts for 1-2 hours worth of material. The course is taught in English and is free of charge. Upon completion of the course, you can receive an e-certificate from LinkedIn Learning. Interactive Animations with CSS and JavaScript is taught by W. Scott Means.

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

Syllabus
  • 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