Join James Williamson for an in-depth discussion in this video Creating transitions, part of CSS: Advanced Typographic Techniques.
- View Offline
- Exercise Files
CSS transitions require a two step process.…First, we have to define which element that we want the transition to occur…on and then, you know, which properties…should animate as a transition is being triggered.…Now, after you do that, you then have…to change the properties based on some type of…event that is going to trigger the transition…and this is typically like a hover event or.…Focus event, something like that. So we're going to focus…on the defining the transition in this exercise, and then on triggering the…transition in the next exercise. so I have focus.htm from…05_03 opened up, and I'm going to scroll down into our span selector.…
So we want each of our letters to transition individually.…So not as a whole word, but each letter one at a time.…And so, that's why we're going to apply the transition…to the actual span tags themselves.…Okay, so I'm going to come in and I'll first to a webkit transition.…You typically don't have to still do this.…But I like being thorough in terms of cross browser compliance.…
- 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.