Apply CSS transitions - CSS Tutorial

- [Instructor] A transition is a change of state from an initial state to an end state or final state, which is the object's final appearance. What are some events that can trigger a transition? They include checking a web form check box or radio button, giving a form element the focus, or removing focus from a web form element, entering valid or invalid data into a web form, hovering the mouse pointer over a web link, or moving the mouse pointer away from a web link. Let's see a transition in action. In this demo, I have a box containing a small yellow square. I also have a style rule that uses the hover pseudo-class to specify how the object should appear during a hover event. And when I hover the mouse pointer over the box, the object changes from the small yellow square to a large purple circle, as well as moving from the left edge to the right edge of the box. Now this transition is done instantaneously as the object jumps from the initial state to the end state. But I might want to slow this transition down so that I could see all the intermediate steps involved in changing the shape, size, location, and color. And that's where CSS transition styles come in. The style has two properties that we'll consider in this video. The first property defines which of the many CSS styles are part of the transition. Another property or parameter defines the duration of the transition. Durations can be measured in either milliseconds or seconds. Let's select the all option for the transition and specify a duration of three seconds, adding the property transition all to the style rule for the initial state of the object. Now let's try hovering our mouse pointer over the object. And with the transition in place, the change in state occurs gradually over the three second interval. Now what happens when I move my mouse pointer away from the box? When that happens, the transition is repeated in reverse so we would call this a symmetric transition. The transition style is what's known as a shorthand property because it specifies several parameter values. But I can specify the same type of transition using the transition-property and the transition-duration styles. Which method you use is a matter of personal preference. I like having all my styles on one line. A quick word about the keyword all. All means all properties that can be animated. This includes such properties as border-width, margin, size, padding, top, left, bottom, right, and so forth. Essentially, any CSS style that can be expressed in terms of numbers is animatable because a browser can calculate or interpolate intermediate values between the initial and end states. Properties that are not animatable include ones which don't have any numeric values in the intermediate state, such as border-style, display, background-image, and so forth. For example, the font-family style certainly would not be animatable because there's no intermediate style between say, the Helvetica font and Times Roman. The all keyword is easy to use but it might affect browser performance if the browser has to keep track of a lot of different styles that may be changing. To avoid that, you can place the styles that you want animated in a comma separated list of property names and durations. For example, here I have the transition style with four properties listed, background-color, left, width, height, and border-radius. Now I've set the duration of each to three seconds. So I get the same type of effect. But I can also change the duration for individual styles. Let's change the background color transition to two seconds, and the left color to two seconds, and we'll leave the other properties at three seconds in duration. And now I get quite a different effect. Or I can have transitions applied to some properties and not to others. So I've only applied it to the left in the width/height properties. I'll get this type of transition. Now you notice the other styles still change even when they're not part of the transition. When no duration is specified, then the transition occurs immediately without any delay for those other properties. I can also list the properties and durations in the transition-property and transition-duration styles. In this case, both of these two style rules have the same effect. If the lists are not the same length, then the values are repeated. So in this case, I have only two durations listed and thus the background style will be applied over three seconds, the width over two seconds, and the left style will be applied over three seconds as well. Now that we've explored the transition style, let's apply it to a web page. I have here a web page for a website called The Classical Sketchbook. At the top of the page is a navigation list containing a list of links to pages within the website. Right now, there's no visual indication that these are hyperlinks. So let's add a hover effect that highlights the links for the user. I'll first create a style rule for the hyperlinks within the navigation list, using the hover pseudo-class so that this style rule only applies during the hover event. I'll change the font color to a light brown using the color value 92, 75, 57. I'll increase the font size to 2.4em. I'll move the text up 30 pixels on the page, and I'll move it to the right 12 pixels. And finally, I'll change the text shadow to show more of a semi-transparent shadow with offsets of 10 pixels and a blur effect of five pixels. Now let's save our file and see the results. It's not very pleasing, is it? So what you really want is more of a slow-down on the transitions. Let's return to the style sheet and add a transition effect. I'll use the all keyword to refer to all styles that are changing between the initial state and the hover state. And I'll set the transition duration to 1.2 seconds. Now let's see the results. There, that looks a bit better. If you want to continue to explore the transition style, you can return to the demo page. If you want to look at other features of CSS transitions, go on to the next video.