A CodePen by Jorger.

index.html

  <div class = 'box' id = 'box_1'>
    <b>Bloque JH 1</b>
  </div>
  <div class = 'box' id = 'box_2'>
    <b>Bloque JH 2</b>
  </div>
  <div class = 'box' id = 'box_3'>
    <b>Bloque JH 3</b>
  </div>
  <div class = 'box' id = 'box_4'>
    <b>Bloque JH 4</b>
  </div>
  <div class = 'box' id = 'box_5'>
    <b>Bloque JH 5</b>
  </div>
  <div class = 'box' id = 'box_6'>
    <b>Bloque JH 6</b>
  </div>

style.css

.box
{
  background: green;
  border: 1px solid black;
  border-radius: 5px;
  color: white;
  height: 30px;
  padding-top: 10px;
  margin: 2px;
  text-align: center;
  text-shadow: 1px 1px 1px black;
  transition: all 1s;
  /*transition-delay: 1s;*/
  
  width: 100px;
}

.box:hover
{
  width:  600px;
  /*height: 50px;*/
  background: red;
  /*border-radius: 50px;*/
}
#box_1
{
  transition-timing-function:linear;
}

#box_2
{
  transition-timing-function:ease;
}

#box_3
{
  transition-timing-function:ease-in;
}

#box_4
{
  transition-timing-function:ease-out;
}

#box_5
{
  transition-timing-function:ease-in-out;
}