Creating Your First Transition with transition-duration

CSS transitions give you an easy way to animate parts of your interface by 0:00 changing a set of CSS properties from one value to another over a period of time. 0:05 Normally when you change the value of a CSS property, for 0:10 example the background of a button on hover, the change is abrupt. 0:13 But you can smoothen the change and 0:17 have it occur gradually by animating it over time with a CSS transition. 0:19 This makes your user interface interactions more fluid. 0:24 To transition CSS properties from one value to another, 0:27 we need to tell the browser which properties to transition and 0:30 how long the transition effect should take. 0:33 Then you can optionally instruct the browser to delay the transition and 0:36 control how that transition changes speed over its duration 0:40 all with just a few lines of CSS. 0:44 Transitions are usually triggered by a user's action or a change in state. 0:46 So for example, a mouse click or 0:51 a hover, focus and active state can trigger a CSS transition on a button. 0:53 And you can also use JavaScript to trigger a transition. 0:57 So there are a lot of ways to take advantage 1:01 of the visual effects provided by transitions. 1:04 So, first, I'll show you a really simple way of creating a transition by defining 1:07 only the length of a transition with the transition duration property. 1:10 You can follow along using Workspaces by launching the orkspace on this page. 1:16 Or you can download the files to follow along with your own text editor 1:20 if you prefer. 1:23 So the index.html file in the workspace 1:23 has six photo container divs that contain an image 1:28 along with the image's title, description, and a download link. 1:34 The styles for this webpage are in the CSS folder. 1:40 Now, the main styles to this photo gallery are in the file main.css. 1:43 This CSS applies to all browsers, from phones and tablets to desktop computers. 1:48 For this course I've split up the CSS files so 1:55 we can focus only on the transition and transform styles we're about to write and 1:58 not be distracted by all these main styles. 2:02 So we're going to write our transition and 2:05 transform styles here inside interactions.css. 2:08 Now, normally on your projects you'd write the styles in the same CSS file, but 2:13 again, writing them in a separate file will make everything in these lessons 2:18 easier to explain. 2:21 You can see what the page looks like once you preview index.html in the browser. 2:23 So the photo gallery we're going to use in this section of the course is a simple, 2:28 responsive six image gallery. 2:33 Now the styles for the titles and descriptions in the bottom row 2:36 are a little different from the ones in the top row and 2:40 you'll see why later on in this section. 2:43 So we're going to enhance some of the user interactions in this photo gallery using 2:46 CSS transitions first, then make them even more exciting later with CSS transforms. 2:51 As I mentioned earlier, CSS transitions let you smoothly change 2:57 the CSS property of an element over a specified duration. 3:01 And then you can control the speed at which the properties change. 3:05 Transitions can alter the appearance of an element whenever a state change happens, 3:10 like when it's hovered over, focused on, active, or targeted. 3:15 So in order to transition a property you need a start value and an end value. 3:20 One of the simplest ways properties can be transitioned 3:26 is when triggered by a pseudo class like hover. 3:28 In the file interactions.css I'm 3:32 going to create a new rule that targets button on hover. 3:35 Then I'll add a background property to change the button's background color to 3:44 a light shade of red. 3:48 So now we have our start value and our end value. 3:55 Now currently, if I hover over and 3:59 away from a gallery button it looks like a regular abrupt hover state change. 4:02 So lets smoothly transition the background color from blue to red on hover. 4:08 There are four different properties associated with CSS transitions. 4:15 One defines the property or set of properties to transition. 4:19 Another, the duration of the transition, and two optional properties for 4:23 defining a timing function and a delay. 4:27 At the very least, 4:31 we can define a transition by defining how long the transition should last. 4:32 This is called the transition duration. 4:37 So back inside interactions.css, here in the button rule, 4:40 I'm going to set the duration using the transition-duration property. 4:45 The transition-duration property is a required property for CSS transitions. 4:51 In this rule, 4:58 it will define the length of time of the transition that will occur on hover. 4:58 Transition duration accepts a numeric value followed by a CSS time unit and 5:04 the time unit can be of seconds or milliseconds. 5:10 The default value for transition duration is zero seconds or 5:13 no duration so no transition in properties occur. 5:18 I'm going to set the duration to one second by typing the value, 1s. 5:23 So this sets the properties associated with the class button 5:28 to transition over a period of one second. 5:32 Since we've defined a background value change here in the hover rule. 5:36 The browser now knows that it needs to go from this shade of blue 5:40 to this shade of red over one second. 5:44 So now when the button enters the hover state we see a gradual change 5:48 from blue to red over a duration of one second, then when 5:54 I mouse off the button it transitions back to the original state in one second. 5:59 So the browser actually figures out the colors in between the blue and 6:04 red in order to animate the background. 6:08 When you define a transition in the original state rule, 6:11 like the button rule here, the properties will transition to and 6:15 from the state changes you define, for example on hover, focus, or active. 6:20 If I want to transition the button's background to a darker shade of red when 6:26 the button is active, I can simply create a new rule using the active pseudo class. 6:31 So right below the hover rule, I'll create a new rule using the active pseudo class. 6:36 Then I'll add a background property to change the button's background color to 6:44 a darker shade of red. 6:49 Back in the browser, when I click and 6:54 hold on a button the background transitions to dark red over one second. 6:57 So here the background is transitioning from the hover state to the active state. 7:03 And once I release my mouse, the background transitions back to the lighter 7:08 red defined in the hover rule, then back to its original state. 7:13 You can specify the transition duration value in different ways. 7:17 To specify the duration in milliseconds 7:21 you can add a period before the number value. 7:23 For example, let's set the duration to 0.4 seconds. 7:27 So now the transition from blue to red is much faster. 7:33 Some developers prefer to add a leading zero before the period. 7:40 This can help you clearly distinguish values in milliseconds 7:45 from values in seconds. 7:48 Sometimes you may see millisecond values defined using the MS CSS time unit. 7:50 For instance, the value 0.4 seconds is 7:57 equivalent to the value 400ms or milliseconds. 8:01 And as we can see in the browser, 8:06 the result is exactly the same as the value 0.4 seconds. 8:08 So either value is perfectly valid and acceptable and 8:13 it's up to you which one to use. 8:17 So I'm going to change my value back to 0.4 seconds. 8:19 So this is all you really need to create a basic CSS transition. 8:25 Now when you create a transition by defining the transition duration only, 8:29 the transition applies to all the properties written in the CSS rule. 8:35 So in the next video you'll learn how to transition only the properties that need 8:39 transitioning. 8:44