CSS
Transitions & Animations
CSS property transitions allow the appearance and behavior of an element to be altered in multiple ways.
Transition Property
The transition-property determines what properties will be transitioned.
| Value | Description |
|---|---|
| Background | It only transitions the background property |
| Color | It only transitions the color property |
| Transform | It only transitions the transform property |
| All | It transitions all the properties |
| None | The transition is instant as the element transitions no property |
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
.box {
background: #2db34a;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>Transition Duration
The transition-duration property set the duration in which a transition takes place. The value of this property can be set using general timing values, including seconds (s) and milliseconds (ms).
| Value | Description |
|---|---|
| 0s | The transition is instant as the element transitions no property |
| 1.2s | It uses decimal values in seconds with the keyword “s” |
| 2400ms | It uses decimal values in milliseconds with the keyword “ms” |
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
.box {
background: #2db34a;
border-radius: 6px;
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>Transition Time
The CSS property transition-timing-function is used to set the speed in which a transition will move.
| Value | Description |
|---|---|
| ease | It starts slowly, accelerates in the middle, and slows down at the end |
| ease-in | It starts slowly, and accelerates gradually until the end |
| ease-out | It starts quickly, and decelerates gradually until the end |
| ease-in-out | It starts quickly, and decelerates gradually until the end |
| linear | It has a *constant speed |
| step-start | It jumps instantly to the final state |
| step-end | It stays at the initial state until the end, when it instantly jumps to the final state |
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
.box {
background: #2db34a;
border-radius: 6px;
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear, ease-in;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>Transition Delay
CSS transition propert delay sets a time value, seconds or milliseconds, that determines how long a transition will take time before execution.
| Value | Description |
|---|---|
| 0s | It will wait zero seconds, and thus start right away |
| 1.2s | It uses decimal values in seconds with the keyword “s” |
| 2400ms | It uses decimal values in milliseconds with the keyword “ms” |
| -500ms | It uses negative values so the transition will start as if it had already been playing for 500ms. |
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
.box {
background: #2db34a;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: .2s, 1s;
transition-timing-function: linear, ease-in;
transition-delay: 0s, 1s;
}
.box:hover {
background: #ff7b29;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>