# How to set the speed curve of the transition effect with CSS

CSSWeb DevelopmentFront End Technology

Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are: ease, ease-in, ease-out, linear, etc.

## Example

You can try to run the following code to set the speed curve of the transition effect with CSS −

Live Demo

<!DOCTYPE html>
<html>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 {
transition-timing-function: linear;
}
#effect2 {
transition-timing-function: ease-in;
}
div:hover {
width: 250px;
}
</style>
</html>