Développement
Create Modern CSS Animations
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
We'll even cover how to add user interactivity:
And don't think animation is just for decoration. Let's enhance the user experience of your sites by jazzing up ordinary user actions!
Ready to dive in and bring your web pages to life?
Yeah, I thought so. 😁 Let's get started!
Learning outcomes
- Apply the 12 Principles of Animation
- Implement simple CSS transitions
Turn it into a career
Take one of our 100% online diploma training programs, and transform your know-how into professional skills.
- Up to 100% of your training program funded
- Flexible start date
- Career-focused projects
- Individual mentoring
Table of contents
- Part 1
Get started with CSS Animations
- 1
Get the most out of this course
- 2
Get acquainted with animation for the web
- 3
Use CSS transitions for simple animations
- 4
Use pseudo-selectors to trigger CSS transitions
- 5
Apply the 12 principles of animation to the web
- 6
Create multi-property CSS transitions
- 7
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!
- Part 3
Make your animations dynamic
