Join James Williamson for an in-depth discussion in this video Creating keyframe animations, part of CSS: Advanced Typographic Techniques.
Although having text that animates when your…users interact with it can be extremely helpful.…What if you wanted text that animated,…say, just persistently, sort of in the background.…Well, in that case, transitions aren't really going to be able to help you.…And you're going to need to turn to CSS animations.…Now a lot like transitions, creating animations is kind of a two step process.…First thing we're going to do is define the animation itself and…then we're going to decide when and where to play it.…So I have the focus animation or focus animate file I should say.…
From the 05_05 directory opened up and I'm…going to scroll down towards the bottom of that.…I can see that I've got span tag here.…By the way, if I preview this in the browser,…it's pretty much the exact same thing we had before.…There's just no transitions applied to it quite yet. Okay.…So animations…are kind of interesting syntax because you're dealing…with it's a lot like writing a MIDI query.…In the fact that you're using one of those at rules, okay.…
- 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.