Web Animation with CSS and JavaScript

The post-Flash era of web animation now consists of HTML5 web banners, CSS Animations and Transitions and JavaScript libraries such as jQuery and GASP (GreenSock) and others.

Where does Animation fit in web design today?

Animation reinforces hierarchy, relationships, structure, and cause and effect. Animation helps humans understand what’s happening on screen. It won’t make your site functional or more reliable, but it can contribute to making your site more interesting, usable and proficient in getting the goals of your site across to your visitors.

Animation can show, instead of tell. Subtle movements can offer feedback that lets visitors know when they’ve done something correctly and when they haven’t. It’s attention-getting, visual cue that leads users through a design and indicates where they can go next to learn more.

This class will focus on all three types of animation (static, stateful and dynamic) as well as talk about motion design theory, then get into the code of how to implement it on the web using either CSS or JavaScript.

    Objectives for this class are:
  • Understand the benefits of animation in your web design
  • Understand the three different types of animation (static, stateful and dynamic)
  • Overview of the Web Animation API spec
  • Know what and how to use Polyfills for browser support
  • Learn CSS Transforms
    • translate, scale, rotate and skew
    • Nested transforms
  • Learn CSS Transitions
    • duration, timing, easing, delay,
    • Transition Events
  • CSS Animations with keyframes
  • How to create realistic animation using Disney’s 12 Principles of Animation
  • How to use CSS framework Animate.css
  • How to create scroller-based animations with JavaScript libraries Wow.js and Skroller.js
  • Using the popular JavaScript library GASP: TweenLite, TweenMax and TimelineLite
  • Creating simple HTML5 Web banners.
  • Knowing about other various animation tools.

Applicable Job Roles: web designers, webmasters, web programmers, and web application developers, and any IT related job

Week 1: Animation Basics
  • History of Animation
  • Animation on the web: CSS and JavaScript
  • Types of Animation: (static, stateful and dynamic)
  • Disney’s 12 Principals of Animation
  • Testing out CSS Transition and Animation property
Week 2: CSS Transitions and Transformation
  • Online tools to test out CSS: CodePen
  • Transitions and Animations properties
  • Timing functions
  • Multiple transitions
Week 3: Animation in Action
  • Using keyframes
  • Animation properties
  • Multiple animations
  • Animated storytelling
  • Using Animate.css
Week 4: JavaScript Animation Libraries
  • Differences between CSS and JavaScript animation
  • Performance issues
  • Page Scrolling animation libraries: Wow.js and Skrollr.js
  • Motion Design Theory
  • Physics-based motion: GASP – TweenLite and TweenMax
A very solid understanding of the HTML, CSS and JavaScript is required for this class.
  • You will a web host to post assignments and a current web browser.

Additional information:

Your place in the course is confirmed by your payment. Introductory courses are intended for students with no experience in the subject matter and are seeking beginner level training.

Refund Policy: Please read our Terms and Refund Policy before registering for this course.

Additional Cost: Book and software might be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

How eClasses Work:Instructors post lectures (text-based, no video or audio), reading selections, and hands-on assignments once a week in the online classroom. Students can discuss the assignments with the instructor and amongst themselves in the classroom area. This format has no set meeting time, which allows students to attend class at a time most convenient to them, yet still provides logically organized communication between class participants. Students can apply for the completion certificate after finishing the class.


Price: $180.00
WITI Price: $120.00
Course No.: H160
Instructor Frank Stepanski
CEUs 2
Duration 4 weeks
Open Courses:

Sorry, no other session is scheduled for this course. You can add this course to your wish list and we will notify you when other sessions are scheduled.

Instructor's Profile:
InstructorFrank Stepanski has over 10 years experience in the IT field as a Web Developer. Frank has worked with technologies such as PHP, MySQL, ASP.NET, SQL Server as well as HTML, CSS and JavaScript. He has a Masters Degree in Software Engineering from Penn State University. He also teaches web programming classes at local universities.
Before you register for this class, please read the Outline, Prerequisites, Requirements, Books, and Refund Policy sections carefully.


Sorry, no testimonial has been posted for this course!