Do you want to learn how to create interactive web animations
You can learn interactive animations right now in the online editor CodePen. Links are available in the description of lesson [CSS animation properties] and section "CSS Animations" ("CSS Animations")
This course has a sequential structure: from simple to complicated:
The introduction will tell you about the history of web animation creation.
Below is the information on creating simple animations with CSS3 [CSS Animation properties and CSS Keyframe rule. CSS Transitions]
We will be discussing SVG animations in the middle section of the course. SVG elements, attributes, and properties that can be animated will be covered. In addition, you will also learn about Interactivity and Interface Time Event in SVG.
In the final lesson, you'll learn about Web Animations API technology.
This course teaches you how to apply new knowledge through practical examples.
Structure of the course's graphic design:
In the upper right corner, the title of the chapter. (Example: "CSS animations")
In the upper left corner, the number of the lesson within the current chapter. (Example: "Lesson 2")
In the upper-middle, the name of the lesson/next topic. [Example: "Attributes which define animation values over the time"]
On the right side of your screen, you will see a board with theoretical data.
You will see the Visual Studio Code Editor with examples to illustrate the theory on the left side of your screen.
at the bottom of the screen - additional auxiliary information [Example: "class="LearnCssAnimation""].
You can view all lessons in this course in 1080p.
You have two choices when it comes to working with the code:
1. You will receive a link to the current lesson in the online CodePen editors. Click the "Resources" button for the class you are currently studying. Then, open the file with the link [Example: "C2L1 Link to Source Code in Codepen Editor.txt") and follow the link in a text editor.
2. 2. Download the archive [Example: "C2L1.rar") Unpack to disk. Save the files to disk.