<div class="block">
<code>transition-duration: 0s;</code>
</div>
<div class="block block2">
<code>transition-duration: .5s;</code>
</div>
body {
padding: 36px;
}
.block {
width: 400px;
background-color: gold;
color: #444;
font-size: 15px;
padding: 16px 8px;
transition: all 0s ease-out .15s;
margin-bottom: 36px;
}
.block2 {
transition-duration: .5s;
}
.block:hover {
width: 425px;
color: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.