Join James Williamson for an in-depth discussion in this video Enabling animations, part of CSS: Advanced Typographic Techniques.
We're almost ready to finish up our animated exercise.…We define our animation in the previous exercise.…So in this one we're going to need to, to use it.…So we're going to checkout how we can use our brand…new CSS animation by deciding where and when it gets used.…So I have the focus animate file open from the 05_06 directory.…If I scroll down, just to sort of, re-acquaint ourselves…with this.…I know it was just the last exercise but,…you can see we have our key frames animation.…
So, we're defining them and we are naming them.…So, now, all we need to do to use them is somewhere in, select, or based…on either, somebody triggering the animation or, in…this case, we want to do a persistent animation.…We simply call the animation name, and then we…sort of tell it how we want to use it.…Okay, let me show you sort of how that works.…I am going to…go just above these guys and I am going to use again the magic of lettering.js…character one because our get focused is all inside of those ordinal span tags.…
And character one I'm going to do a -webkit-animation.…
- Controlling font rendering with CSS
- Using web fonts
- Adjusting kerning
- Adding dimension to text
- Working with gradients and drop shadows
- Using 2D and 3D transforms
- Applying perspective
- Aligning split text
- Creating and triggering transitions
- Enabling animations
- Extending CSS with Lettering.js and Modernizr
Skill Level Intermediate
1. Getting Started
2. Using Lettering.js
3. Creating Dimensional Text
4. Creating Refracted Text
5. Animating Text
6. Using Modernizr
Additional resources2m 11s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.