Using Transitions
The CSS transition controls the rate at which new property values are applied.
The following table lists the transition related properties:
Property | Description |
---|---|
transition-delay | Specifies a delay. It is a CSS time value. |
transition-duration | Specifies the length. It is a CSS time value. |
transition-property | Specifies the target property. |
transition-timing-function | Specifies how to calculated the intermediate value during the transition. |
transition | Shorthand to specify all in one declaration. |
A CSS times is a number followed by either ms to denote milliseconds or s to denote seconds. The format for the transition shorthand property is as follows:
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
-webkit- means we use it with Safari and Chrome.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#myID {
font-size: large;
border: medium solid black;
}
#myID:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding, font-size, border;
-webkit-transition-duration: 500ms;
}
</style>
</head>
<body>
<p>
<span id="myID">HTML</span>
This is a test.
</p>
</body>
</html>
Creating Inverse Transitions
The following shows how you can smooth the return to the original style.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#myID {
font-size: large;
border: medium solid black;
-webkit-transition-delay: 10ms;
-webkit-transition-duration: 250ms;
}
#myID:hover {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding, font-size, border;
-webkit-transition-duration: 500ms;
}
</style>
</head>
<body>
<p>
<span id="myID">HTML</span>
This is a test.
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Transitions:
- Using Transitions
- Selecting How Intermediate Values Are Calculated
Related: