div#mainfeat{
    -webkit-animation: myfirst 20s; /* Chrome, Safari, Opera */
    animation: myfirst 20s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
   
    0%   {background:  rgba(232, 44, 12, 0.74);}
    25%  {background: yellow;}
    50%  {background: black;}
    75%  {background: rgba(232, 44, 12, 0, 74);}
    85% {background: #E82C0C;}
    100%  {background: rgba(232, 44, 12, 0, 74);}
     
}



/* Standard syntax rgba(232, 44, 12, 0, 74) */
@keyframes myfirst {
     0%   {background:  rgba(232, 44, 12, 0.74);}
    25%  {background: yellow;}
    50%  {background: black;}
    75%  {background: rgba(232, 44, 12, 0, 74);}
    85% {background: #E82C0C;}
    100%  {background: rgba(232, 44, 12, 0, 74);}
    
} 


/*div.wrapper { 
    position relative:
    overflow: hidden;
    width: 400px;
    border: 1px solid black;
  }

div.column1 {
    position: absolute;
    right: 300px;
    width: 340px;
    
    transition: 1s;
}

.wrapper div.column1 :hover{
    
   
    -webkit-transition: width 2s;
    transition: width 2s;
        right: 100px;
}
*/

div.column1 {

 -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
   transition: width 1s;
}
div.column1:hover {
    width: 400px;
    
}

div.column2 {

 -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
   transition: width 1s;
}
div.column2:hover {
    width: 400px;
    ;
    
}
div.column3 {

 -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
   transition: width 1s
}
div.column3:hover {
    width: 400px;
}