Interactive Web Animations [JavaScript, SVG, CSS & HTML]

The Complete Guide to Web Animation in Web Development [CSS Animations -- > SVG Animations -- > JavaScript Animations].


  • For the first acquaintance with web animation, additional knowledge is not required. For deep assimilation of the materials, primary knowledge of HTML, CSS, SVG, JavaScript is desirable.


Interactive Web Animations [JavaScript, SVG, CSS & HTML]


1. History of Web Animations

2. CSS Animations

– CSS Animation properties

– CSS Key frame rule

– CSS Transitions

3. SVG Animations

– SVG Animation elements

– Attribute to identify the target element for an animation

– Attributes to control the timing of the animation

– Attributes that define animation values ​​over time

– Attributes that control whether animations are additive

– SVG elements, attributes and properties that can be animated, and we will also learn Interface Time Event

– Interactivity features in SVG

4. JavaScript Animations

– getElementById() method

– Call planning method setinterval()

– addEventListener() method

– getAttribute & setAttribute methods

– How to penetrate the complex SVG attributes of elements using regular expressions

– 3d positioning

– The functions of constructors

– Creation of SVG primitives

– Сreating arrays of objects, managing their properties

– Capabilities of Web Animation using masks & clip path

– Web Animations API

– Combination of animation techniques

Who this course is for:

  • This course for those who want to master Interactive Web Animation.

Join Course

Share this: