CSS transition-timing-function Property

« Back to CSS transition-timing-function Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
   transition-duration: 1s;
   width: 100px;
   height: 60px; 
   background-color: khaki; 
   display: inline-block; 
   border: 2px solid orange;
   margin-bottom: 13px; 
}
div:hover {
   height: 250px; 
   background-color: moccasin; 
}
.test { 
   transition-timing-function: ease;  
} 
.test2 { 
   transition-timing-function: linear;  
}
.test3 { 
   transition-timing-function: ease-in;  
}
 .test4 { 
   transition-timing-function: ease-out;  
}
.test5 { 
   transition-timing-function: ease-in-out;  
} 
.test6 { 
   transition-timing-function: cubic-bezier (0.5,0.05,0.7,0.5);   
}
</style>
</head>
<body>
<div class="test"> ease </div> 
<div class="test2"> linear </div> 
<div class="test3"> ease-in </div> 
<div class="test4"> ease-out </div> 
<div class="test5"> ease-in-out </div> 
<div class="test6" > cubic-bezier </div> 
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee