CSS transition-delay Property - Playground Example

« Back to CSS transition-delay Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
   width: 90px;
   height: 90px;
   background-color: yellow; 
   border: 5px dashed black; 
   display: inline-block; 
   margin-right: 15px; 
} 
div:hover { 
   height: 200px;  
 } 
.test { 
   transition-duration: 5s; 
   transition-delay: 1s;  
} 
.test2 {
   transition-duration: 2s; 
   transition-delay: 2s;
} 
.test3 { 
   transition-duration: 400ms; 
    transition-delay: 900ms; 
} 
</style>
</head>
<body>
<div class="test"> delay 1s </div> 
<div class="test2"> delay 2s </div> 
<div class="test3"> delay 900ms </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