Description
Would you like to learn how to create interactive web animations?
Right now, you can familiarize yourself with several interesting interactive animations of this course in the online editor CodePen. Links can be found in the description of lesson “CSS animation properties [part1] & @keyframes rule” section “CSS Animations”.
In this course, you will learn how to create web animations using markup languages CSS & SVG and programming language JavaScript.
This course is structured sequentially: from simple to complex:
- In the introduction, you will learn about the history of the creation of web animations;
- below is the material on how to create the simplest animations using CSS3 [CSS Animation properties, CSS Keyframe rule, CSS Transitions];
- in the middle of the course, we will talk about SVG animations. You will learn SVG elements, attributes and properties that can be animated, in addition to this, you will learn about Interface Time Event and Interactivity features in SVG;
- the last chapter of the course focuses on interactive animations using JavaScript;
- in the last lesson, you will become familiar with the Web Animations API technology.
In this course, lessons start with theoretical information and end with practical examples that reinforce new knowledge.
The structure of the graphic design of the course:
- in the upper right part – the title of the chapter [Example: “CSS animations”];
- in the upper left part – the number of the lesson in the current chapter [Example: “Lesson 2”];
- in the upper middle part – the name of the lesson or the next topic of the current lesson [Example: “Attributes that define animation values over time”];
- on the right side of the screen – a board with theoretical information;
- on the left side of the screen – Visual studio code editor with examples illustrating the theory;
- at the bottom of the screen – additional auxiliary information [Example: “class=”LearnCssAnimation””].
All lessons in this course are available for viewing in 1080p quality.
To work with the code, you can choose one of two options:
1. Get a link to the code of the current lesson in the online CodePen editor (for this you need to click the “Resources” button corresponding to the lesson you are currently studying, download the file with the link [example file: “C2L1 link to source code in codepen editor.txt”], open it in a text editor and follow the link).
2. Download the archive [example: “C2L1.rar”]. Unpack to disk. Open files in a text editor [“Visual Studio Code” can become a convenient editor, or any of your choice].
By the end of the course, you will have the knowledge to build web animations of any complexity using CSS, SVG & JavaScript.
Who this course is for:
- everyone who is interested in web animation
- JavaScript developers
- CSS developers
- Html developers
- website designer
- frontend developers
- UX/UI designers
- for people who collect a unique library of knowledge in order to have access to it from anywhere in the world
- creative people interested in learning new things
Requirements
- 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.
- Web browser – Google Chrome (all animations have been tested in this browser)
- A text editor or you can work in the online CodePen editor (links to examples with code are prepared and attached to the corresponding lessons)
- Archiver for unpacking “.rar” archive with animation sources [If you choose the option of working with the code in the online editor CodePen, you will not need an archiver]
Last Updated 9/2021
Download Links
Direct Download
Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ].zip (1.7 GB) | Mirror
