Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Interactive Animations with CSS and JavaScript

via LinkedIn Learning

Go to class Write review

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Grab it
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

Taught by

W. Scott Means

Reviews

4.5 rating at LinkedIn Learning based on 111 ratings

Start your review of Interactive Animations with CSS and JavaScript

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.