O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

HTML5 Animation and Transition

Video Description

Learn how to develop incredible animations and transitions with HTML5

About This Video

  • Learn how to harness the power of HTML5's latest APIs to develop incredible animations and transitions

  • Implement every available method to develop motion graphics using open web technologies such as DOM, CSS3, SVG, Canvas, and WebGL

  • Concepts are explained with step-by-step instructions and real-time coding examples

  • In Detail

    From modern websites and data visualizations to video games or hybrid applications, animations and transitions are nowadays something that everyone—your clients, users, or managers—will expect your application to have. Thankfully, the latest HTML specification, HTML5, includes many tools to aid you in that mission. In this video series, you'll learn how to get the most out of all of them.

    In "HTML5 Animation and Transition", you'll be learning how to develop rich, complex motion graphics using HTML5 APIs such as DOM, CSS3, Canvas, SVG, and WebGL, as well as the basic mathematical concepts behind complex animations—essential knowledge for any modern web developer.

    In the "HTML5 Animation and Transition" video course, we will tackle everything that you need to know in order to become an expert at animating elements using the latest HTML5 APIs, starting from the most rudimentary methods such as using the DOM, to the most modern ones such as SVG, CSS3, Canvas, and WebGL. At the same time, you'll also be learning the mathematical concepts required to make complex animations.

    Using the first chapters, you will learn (or refresh!) concepts such as vectors, vector operations, interpolations, and easing and acceleration. Then, you'll learn how to display static graphics on the screen using several rendering methods available in HTML5, such as DOM, CSS3, SVG, Canvas, or WebGL. Once you've learned how to display things on the screen, you'll dedicate entire chapters to implement several animation examples using every single rendering method.

    Table of Contents

    1. Chapter 1: Introduction
      1. Introduction 00:02:34
      2. What is the Difference between a Transition and an Animation? 00:02:31
      3. Introduction to Vectors 00:03:22
      4. Vector Examples 00:04:57
      5. Easing and Acceleration 00:03:20
      6. Interpolation 00:04:07
    2. Chapter 2: Rendering elements
      1. Rendering Elements Using DOM Objects #1 00:02:24
      2. Rendering Elements Using DOM Objects #2 00:03:00
      3. Rendering Elements Using the HTML5 Canvas Object #1 00:03:00
      4. Rendering Elements Using the HTML5 Canvas Object #2 00:02:44
      5. Rendering Elements Using SVG with Raphaël #1 00:02:38
      6. Rendering Elements Using SVG with Raphaël #2 00:02:27
    3. Chapter 3: Animating elements
      1. Setting up a Conventional Rendering Scene 00:04:59
      2. Using the DOM to Animate Objects 00:03:51
      3. Animating Elements Using CSS3 Transitions 00:05:17
      4. Animating Elements Using CSS3 Keyframes 00:03:50
      5. Using SVG with Raphaël to Animate Objects 00:03:39
      6. Animating Elements Using the HTML5 Canvas Object #1 00:03:35
      7. Animating Elements Using the HTML5 Canvas Object #2 00:04:47
    4. Chapter 4: Introduction to WebGL
      1. Downloading and Setting Up Three.JS 00:03:53
      2. Introduction to Cameras 00:02:13
      3. Rendering Simple Geometries 00:03:29
      4. Animating Geometries 00:03:58
      5. Importing Models from Blender 00:04:39
      6. Rendering Imported Models 00:04:37
      7. Animating Imported Models 00:04:48
    5. Chapter 5: Complex animations
      1. Animating Spritesheets #1 00:05:08
      2. Animating Spritesheets #2 00:05:24
      3. Particle Generators #1 00:04:58
      4. Particle Generators #2 00:05:01
      5. Particle Generators #3 00:04:52
    6. Chapter 6: Practical examples
      1. Practical Examples #1 00:04:41
      2. Practical Examples #2 00:04:05
      3. Practical Examples #3 00:04:44