Some css animations on you website can make your website more beautiful especially if you add animations as needed.

Let's assume we have a list of items on our page, when you hover on them we want to add a background. Our animation will start from the middle to the edges. This task can be easily done, we will need only few lines of html and css.

As you see in the thumbnail image, when you have the cursor on the item, background is full width.

HTML code: 

<div class="items">
   <div class="item">
   </div>
<div class="item">
   </div>
<div class="item">
   </div>
</div>

And our Animation CSS:

.items .item{
height:50px;
width:100%;
position:relative;
background:#fff;
border-radius:5px;
margin-bottom:20px;
}
.items .item:after{
content:"";
position:absolute;
left:50%;
right:50%;
top:0;
bottom:0;
background:#655353;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
border-radius:5px;
}
.items .item:hover:after{
   left:0;
   right:0;
}

We have a transition for 0.3s seconds, this is the working time of the animation, during this period our pseudo element comes from left:50% and right:50% to left:0/right:0.

Little below you can see the effect.