EaseOutBounce.css

  /* Inspired by this animation http://easings.net/#easeOutBounce */
  #test-div{
      width:50px;
      height: 300px;
      background-color: #456789
    }

    div.animate{
      animation: easeOutBounce 1s 0s forwards;
      -webkit-animation: easeOutBounce 1s 0s forwards;
    }

    @-webkit-keyframes easeOutBounce {
      0% {width: 50px; -webkit-animation-timing-function: ease-in;}
      33% {width: 250px; -webkit-animation-timing-function: ease-out;}
      50% {width: 210px; -webkit-animation-timing-function: ease-in;}
      66% {width: 250px; -webkit-animation-timing-function: ease-out;}
      82% {width: 240px; -webkit-animation-timing-function: ease-in;}
      92% {width: 250px; -webkit-animation-timing-function: ease-out;}
      97% {width: 245px; -webkit-animation-timing-function: ease-in;}
      100% { width: 250px;}
    }
    @keyframes easeOutBounce {
        0% {width: 50px; -webkit-animation-timing-function: ease-in;}
        33% {width: 250px; -webkit-animation-timing-function: ease-out;}
        50% {width: 210px; -webkit-animation-timing-function: ease-in;}
        66% {width: 250px; -webkit-animation-timing-function: ease-out;}
        82% {width: 240px; -webkit-animation-timing-function: ease-in;}
        92% {width: 250px; -webkit-animation-timing-function: ease-out;}
        97% {width: 245px; -webkit-animation-timing-function: ease-in;}
        100% { width: 250px;}
    }