How to Make a Background Transition With CSS
Unlike animations, CSS transitions animate changes between default and hover states of Web page elements. The hover state is similar to a rollover, an element of a page that changes when a user “hovers” her mouse over it. Transitions are applied to CSS properties – background colors, borders, font sizes and other styles you can set – so that if there is a difference in how the property is set on a part of the page when a user hovers over it, rather than an abrupt change, you'll see a gradual, animated change.
Other People Are Reading
Instructions
-
-
1
Open the HTML file for your Web page in a code editor or Notepad. Find the element where you want to apply a transition to a background, such as an image, div or form field:
<div id=”transition_me”>
Content here...
</div>Check that the tag has an ID name and take note of it for later. If the tag doesn't have an ID, add one as shown above.
-
2
Open the CSS file your Web page uses as its style sheet. If your page doesn't use a CSS file, you can add CSS between a pair of “<style>” tags in the head of the HTML code:
<head>
<title>Your Page Title Here</title>
<style type=”text/css”>
<!-- CSS code goes here -->
</style>
</head>In this example, the tags surrounding “CSS code goes here” make that text a comment that the browser doesn't read.
-
-
3
Write a style rule that selects the element by its ID. Make a second style rule that selects the element by its ID only when the user hovers over it:
#transition_me {
}
#transition_me:hover {
}The styles set inside the first style rule are now the default styles of the element. When the user hovers the mouse over that element, the browser looks to the rule with “:hover” to apply different styles.
-
4
Set a property and value within the first style rule:
#transition_me {
background-color: lightblue;
}This example uses the “background-color” property. Other background properties include background-image, background-size, background-repeat and background-position. You can transition any one of these properties.
-
5
Set the changed background in your second style rule:
#transition_me:hover {
background-color: darkblue;
}So far, when the user hovers over the “transition_me” div, the div turns from light blue to dark blue without a transition.
-
6
Apply a transition to a property within the first style rule. The CSS property is “transition” and it takes two values: the name of the property you want to use the transition effect on and the speed of the transition. If you want to transition the div's background color, use this code:
#transition_me {
background-color: lightblue;
transition: background-color 5s;
}Transition speed is specified in seconds.
-
7
Duplicate the “transition” property and its values three times. Add a browser prefix to each duplicate, as shown:
transition: background-color 5s;
-moz-transition: background-color 5s;
-webkit-transition: background-color 5s;
-o-transition: background-color 5s;As of the writing of this article, transitions require browser prefixes. Although it isn't yet functional, “transition” without a prefix ensures your code will work in later browsers that will support this. As of the date of publication, support for transitions is found in Firefox, Chrome, Safari and Opera, though Opera fades the background in when you first load the page.
-
1
Tips & Warnings
Browsers that support transitions also support many related properties that control delay times and easing.
Internet Explorer 9 doesn't support transitions. When users visit a website that has transitions in IE 9, they see the site as if the transitions didn't exist, but all elements and hover states still work. Use a jQuery script as a fallback for IE browsers if those users must also see the transitions.
