Create Modern CSS Animations
5.0 /5- Offered byOpenClassrooms
Create Modern CSS Animations at OpenClassrooms Overview
Duration | 15 hours |
Total fee | Free |
Mode of learning | Online |
Schedule type | Self paced |
Difficulty level | Intermediate |
Official Website | Explore Free Course  |
Credential | Certificate |
Create Modern CSS Animations at OpenClassrooms Highlights
- Flexible timetables : results rather than presence oriented!
- Learn to Apply the 12 Principles of Animation.
- Learn to Create a looping animation using the iteration and direction properties.
Create Modern CSS Animations at OpenClassrooms Course details
- Individuals who are interested in education and can bring fresh perspectives and want to help build great things
- Apply the 12 Principles of Animation.
- Implement simple CSS transitions.
- Build complex CSS transitions.
- Create a multi-stage animation using @keyframes.
- Create a looping animation using the iteration and direction properties.
- Hey, what's that green and blue graphic doing? Moving? You mean there's motion coded right into CSS?? Let's have a nice close look. Can you see the code yet? Look closer. Closer.
- Okay, if I haven't hypnotized you yet, have I at least got your attention? Or better yet, are you interested in getting the attention of your website visitors? That's the beauty of web animations!
- You've worked hard to build your CSS skills. Time to have some fun. Really, you've earned it. Buried deep in your CSS-coding fingertips is some pretty awesome potential to inject your page elements with life! All you need is to explore what makes a quality animation with the help of the 12 Principles of Animation, and to expand your CSS tool belt with:
- Transform() functions
- Pseudo-elements
- @keyframes
- Opacity, iteration, and direction properties
Create Modern CSS Animations at OpenClassrooms Curriculum
Part #1 - Get started with CSS Animations
Get the most out of this course
Get acquainted with animation for the web
Use CSS transitions for simple animations
Use pseudo-selectors to trigger CSS transitions
Apply the 12 principles of animation to the web
Create multi-property CSS transitions
Use timing functions to create more natural animations
Quiz: Have you built a strong foundation in CSS animations?
Part #2 - Translations, rotations, and opacity, oh my!
How do browsers render web pages?
Use the transform CSS property to ensure smooth animations
Change an element's anchor point using transform-origin
Analyze animation performance with Chrome DevTools
Create more peformant color animations using the CSS opacity property
Part #3 - Make your animations dynamic
Create more complex animations using CSS @keyframes
Construct CSS animations using the CSS animation properties
Manipulate and reuse CSS animations
Refine your animations with Chrome's animation tool
Put it all together
Other courses offered by OpenClassrooms
Create Modern CSS Animations at OpenClassrooms Students Ratings & Reviews
1 Rating- 4-51
Student Forum
Anything you would want to ask experts?