Web Animation with CSS and JavaScript

Web Animation with CSS and JavaScript online course
Course Name

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.
Course Books
No book is required for this class.
Course Price
  • Member Price: $80 US
  • Non-Member Price: $180.00 US
[Register Now]

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 migh be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

Start Date: Click on the Register Now button to process to the registration page. You will see the start date of the class on that page.

How eClasses Work:Instructors post lectures, 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. Web Study certificate is also available. Click on the Certificates link on the top navigation bar for more information.


Register Now

Before you register for this class, please read carefully the Outline, Prerequisites, Requirements, Books, and Refund Policy sections.

4 Web Study Certificates

 Valid XHTML 1.0 Transitional  Valid CSS!  Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

Introduction to Dreamweaver Online CourseDreamweaver Online CourseBuilding Data-Driven Websites Course
Web Videography CourseIntroduction to Microsoft Excel - Online CourseDigital Market Research Course
Contracting Your Services - Online CourseBlog Content Writing Course - OnlineWeb Content Writing Skills Course
DNS Administration CourseGoogle Web Analyics CourseWordpress Theme Design Course
Wordpress Content Management CourseDrupal Beginner CourseProject Management Training Course
Joomla Training CourseWeb Design Legal Issues CourseInteractive e-Survey Strategies Course
Search Engine Optimization CourseWebsite Promotion and Marketing Course - OnlineEmail Marketing Course Strategies
Social media Marketing CourseInternet Marketing Strategies CourseWeb Design Concepts Training Course
Web Design Course Training OnlineResponsive Web Design Training CourseIntroduction to Bootstrap Training Course
Introduction to Photoshop CC CourseAdobe InDesign CourseAdobe Illustrator Online Course
Mobile Web Design Online CourseHTML5 Online CourseCSS3 Online Course
Introduction to Sass Online CourseWeb Animation with CSS and JavaScript Online CourseSQL Using MySQL Online Web Training
SQL Server Online CoursePHP Online CoursePHP Online Course
JavaScript for Beginners Online Web TrainingJavaScript Level 2 Online CoursejQuery Web Programming Online Course
PHP Online CourseJavaScript for Beginners Online Web TrainingXML Web Programming Online Course