<div id="ex-anime">
  <div class="anime-cont">
    <p>touch me!</p>
  </div>
</div>
#ex-anime {
  padding: 10px;
  
  .anime-cont {
    width: 100px;
    height: 100px;
    background-color: #ff6347;
    
    p {
      padding: 40px 10px;
      color: #fff;
    }
    
    &:hover {
      animation-name: anime-in;
      animation-duration: 1s;
      animation-timing-function: ease-in;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes anime-in {
  0% {
    width: 100px;
    background-color: #ff6347;
  }
  50% {
    width: 350px;
  }
  58% {
    width: 230px;
  }
  70% {
    width: 330px;
  }
  85% {
    width: 280px;
  }
  100% {
    width: 350px;
    background-color: #4169e1;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.