CodePen

HTML

            
              <div class="animating-width">hover to animate width using CSS Transitions</div>
            
          
!

CSS

            
              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
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................