<div class="animating-width">hover to animate width using CSS Transitions</div>
@import "compass/css3";
html {
background: #292a2b;
color: #FFF;
}
// =========================================
// Width Animation Demo
// =========================================
.animating-width {
background: #e78629;
color: white;
height: 100px;
width: 50%;
@include transition(.3s width ease-in-out); // the transition effect for hover
&:hover {
cursor: pointer;
width: 100%; // animating to full width on hover
}
}
View Compiled
This Pen doesn't use any external CSS resources.