In this CSS animation tutorial, you’ll learn the basics of CSS keyframe animations and discover three unexpected uses for them! ► Download unlimited creative assets with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

CSS keyframe animations are among the most versatile tools in CSS. They’re similar to transitions, but much more powerful. Here's what you'll learn in this CSS keyframe animation video:

Introduction 0:00
1. A Quick Introduction to Keyframe Animation 2:24
2. Making a CSS-Only Typwriter Effect 18:32
3. Creating CSS Animations With Spritesheets 34:35
4. Making a Chained Keyframe Animation 49:10

Follow along and access the source code in this CodePen collection: https://codepen.io/collection/RzGWOy

Assets Used in This Video:

• Gorilla Animation: https://elements.envato.com/animation-of-gorilla-walking-WZ4P6DC?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Cartoon Bulldozer: https://elements.envato.com/cartoon-bulldozer-RX77NN?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Free Sprite Sheet Packer: https://www.codeandweb.com/free-sprite-sheet-packer
• Introduction to Spritesheet Animation: https://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

Here are more details on each section of the course:

1. A Quick Introduction to Keyframe Animations

In this section, we'll take a closer look at keyframe animations and see what they’re all about. We’ll talk about stuff like syntax, timing functions, looping, steps, and fill modes.

2. Making a CSS-Only Typewriter Effect

The first unexpected use for keyframe animations ia a typewriter effect. This is really easy to do in JavaScript since there are a few libraries available, but for a CSS-only approach, we’ll have to get a little creative.

3. Creating CSS Animations With Spritesheets

As the title says, in this section we’re going to create CSS animations with spritesheets. If you don’t know, a sprite sheet is a big image that contains several smaller images. Now, what’s cool about this technique is that when combined with keyframe animations, you can create animated characters or even rotating 3D objects. So let's see how to do that.

4. Making a Chained Keyframe Animation

Now, chained animations. Why should we use them? Well, they’re a nice way of presenting groups of elements or even lists. For example, instead of just displaying the images in a gallery, all at once, we can show them one by one and we can even throw in some nice CSS transforms in there, like a scale or rotate. So let's learn how you can achieve this effect with CSS keyframe animations.

► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more tutorials about CSS keyframe animations on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/search/css+keyframe+animation?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Vsy6ijn82UY&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -