Path title:

Beginner's Guide to CSS Animations and Transitions

Created a year ago and Updated a year ago

Objectives:

- Defining a CSS Animation - Animations with Transform Property - Chaining Animations - Understanding Transition property - Hover Effects with Pseudo Elements - Transitions VS Animations - Learn about Animatable Properties

20 Steps

for all

Free

7 watching

13 reading

+ 27

		#	Type	Title	Creator	Platform	Duration
		1		Defining an Animation : different properties and @keyframes rule	w3 schools	w3schools.com	8m
	What you'll learn in this step: Starting with the Basics of CSS Animations. Learn to define an animation with @keyframes rule and then apply it on an element. Understand how different animation properties are used to define its duration, speed, direction, iteration-count and other attributes.
		2		CSS Animations with Keyframes	Olli	youtube.com	11m
	What you'll learn in this step: Understand the use of keyframes in more detail and look at different animation properties are used to control animations.
		3		Simple Text Animation Just By Using HTML & CSS	DarkCode	youtube.com	4m
	What you'll learn in this step: Understand how different animation properties come together to make a simple yet attractive text animation.
		4		Understanding Transform Property	Josh W. Comeau	joshwcomeau.com	12m
	What you'll learn in this step: Transform property comes very handy when we want to easily make animations and also control its performance and cross-browser compatibility. This articles gives a walk through of how to use transform property and its various functions to scale, skew and rotate an element.
		5		CSS Animation Tutorial #2 - Transforms	The Net Ninja	youtube.com	10m
	What you'll learn in this step: After learning about transform property, this step will show an example and explain how to use its different functions to make an animation.
		6		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: Learn how to create an infinite animation loop in this step with examples.
		7		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: Another example to see how background color can be easily animated with CSS.
		8		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: In this step, you will learn how to assign multiple keyframes on a single element to make more complex animations.
		9		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: Understand the basics of transition property and how it is used.
		10		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: Transition property is mainly used to create smooth hover effects for elements. Let's first understand the :hover selector in CSS with examples.
		11		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Hover effects made with :hover selector show abrupt changes when the mouse is placed on them. Transition property acts as a savior here. It helps to create smooth hover effects. Learn all about it in this step with examples.
	12		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Pseudo elements ::before and ::after are used make hover effects. Learn more about pseudo elements and how they are used in this step.
	13		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Learn how to use pseudo elements and transition property to make a link hover effect.
	14		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: This step looks at another example of using pseudo elements and transition property to make a hover effect which is a button hover effect.
	15		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Just like transform property can be used to easily make animations, they can help to make hover effects when combined with transition property. This step elaborates on that.
	16		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Practice everything learnt about transitions by making an Animated Eye Hover Effect.
	17		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Learn about how to add more steps in an animation or a transition effect with examples.
	18		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Learn about when to use animation properties and transition properties in this step.
	19		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Not all CSS properties can be animated. Learn about the animatable properties in this step.
	20		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Practice making a clock animation with all the properties learnt so far. If you get stuck you can always look at the source code.