Selecting How Intermediate Values Are Calculated
You use the transition-timing-function property to specify the way that intermediate values are determined. There are five preset values to choose from:
- ease (the default value)
- linear
- ease-in
- ease-out
- ease-in-out
<!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;
-webkit-transition-timing-function: linear;
}
</style>
</head>
<body>
<p>
This is a test.
<span id="myID">CSS</span>
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Transitions:
- Using Transitions
- Selecting How Intermediate Values Are Calculated
Related: