OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Take your website projects to the next level and add more value as a developer. Offer skills to businesses that make you and your websites stand out from the crowd.
Learn to build a variety of exciting CSS animations that will enhance the user’s experience and give your website development that extra edge
The animations that you’ll be building will be real-world examples that you can use to enhance any website.
Take your website projects to the next level and add more value as a developer. Offer skills to businesses that make you and your websites stand out from the crowd.
Learn to build a variety of exciting CSS animations that will enhance the user’s experience and give your website development that extra edge
The animations that you’ll be building will be real-world examples that you can use to enhance any website.
This extensive CSS animations course can be followed along by all developers at any skill level, and that includes beginners. It is recommended that you have basic knowledge of HTML and CSS, but there is no need to know anything about web animations as this will all be thoroughly taught. I have not included any complicated terminology so as long as you have a basic understanding of front-end web languages, you will be able to follow along with ease.
You’ll get a full understanding of how to use all aspects of CSS animations such as transitions, transforms, and keyframes to animate images, text, icons, SVGs, and much more. You’ll first learn the fundamentals of CSS animations to help build simple animations, before moving towards more advanced examples.
You’ll be able to flex your creative muscles, whilst still producing animations that are fully accessible, and always keeping the user experience in mind. For all the animation projects that you’ll learn to build, I will provide you with the starting files which will include a basic webpage setup, but then it will be up to you to code along with me. You will be coding all the animations from scratch, expanding your development skillset along the way.
By the end of the course, you’ll have the expert knowledge to be able to charge more for your services as a web developer. Enrol today.
You'll get an introduction to who I am and what you can expect to learn from this course.
Get an understanding of the coding languages you should know and the software/plugins that will make following along with this course easier.
Get an understanding of how web animation has evolved over the years.
You'll get an overview of all the introduction topics that you've just learned.
Get an introduction to exactly what topics will be taught in the fundamentals section of this course.
Become confident using the CSS3 transition property to add smooth animations.
Learn how easing or the timing function can add personality to your animation states, and how to test them in the Google Chrome developer tools.
By the end of this lecture, you'll be able to put together more complex multi-step CSS keyframe animations.
Learn how to work with 3D animations in CSS.
Learn how some animations can negatively affect some users and what you can do to make sure your animations are fully accessible to all.
A quick quiz that covers some core principles around the fundamentals of CSS animation.
A summary that gives an overview of all the techniques learned in the fundamentals section of the course.
Find out how and what you'll be building to become a CSS animation master.
Starting off with a simple project, you'll build a set of navigation links with a subtle hover effect.
Build six different button hover styles with varied animations
Become familiar with keyframe animations and shadow effects to create a neon animation.
Learn to build a custom video play icon with a unique hover animation using transitions and keyframes.
You'll learn how to create a 3D animation click effect to a button
Learn how best to start animating text and images.
Learn how easy it is to animate gradient backgrounds.
Working with keyframes, you'll learn how to build three different scroll down indicators.
How to fix a possible backface-visibility issue that happens in some modern browsers, when following along with the next lesson about rotation animations.
Learn how to include 3D perspectives to your animations.
By the end of this lecture, you'll have the skills to make standard form inputs that little bit more exciting.
Learn how to take a static search bar and animate some life into it.
In this lecture, create four different loading animations, perfect for when you're waiting for your posts to load.
You'll learn how to build a liquid animation effect, ideal for a page loader.
Learn the basics of the clip-property and then apply what you've learned to animate some information cards.
Take what you've learned about the clip-path property and add a polygon animation effect to some text.
How to fix a possible transform: translateZ issue that happens in some modern browsers, when following along with the next lesson about parallax animations.
By the end of this lecture, you'll have built a parallax scrolling effect all in CSS and no JavaScript.
A summary of all the projects and techniques you've learned in this CSS animation projects section of the course.
Get an introduction to the techniques and projects you'll be building in this JavaScript animation section of the course.
In this JavaScript project introduction, learn how to animate an overlay on the click of a button.
Learn to build three different burger click animations.
Use a combination of previously learned techniques to produce an animated side menu.
Learn how to trigger animations when you scroll the window.
Learn how JavaScript can target the mouse position to create some mouse movement animation.
A quick summary giving an overview of the JavaScript techniques you learned in the recent lectures.
Learn what concepts and SVG projects you'll be building in this section of the course.
Learn how to animate SVG icons.
Learn how to convert text into an SVG path, which you can then animate.
By the end of this lecture, you'll be able to animate SVG images.
A summary of the course concepts you've just learned about animating SVGs.
Get an overview of the animation plugins you'll learn about in this section of the course.
Learn how to use the animation plugin Hover.css which is a collection of hover based animation effects.
Learn how to implement Animate.css into a project.
Get to grips with the Animate On Scroll library.
By the end of this lesson, you'll be familiar with some more popular JavaScript animation plugins and libraries.
An overview of the animation plugins and libraries that you've just learned about in this section of the course.
Learn about some CSS techniques that may become more standardised in the future and what you can do to stay on top of current CSS animation trends.
Well done on completing this course, you absolute legend!
Some useful links to my other Udemy courses and my social media accounts.
Save
Accessible even with basic prior knowledge.
Hands-on examples build real-world skills.
Covers wide range of animation techniques.
Instructor explains complex topics clearly.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
