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
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Leave a Reply