Bounce in left

HTML

<div id="containerEx14">
<div class="ex14"><img src="http://bestgif.su/_ph/52/2/405915078.gif?1427279991" alt="" width="140" height="160" /> <img src="http://img1.liveinternet.ru/images/attach/c/2/73/96/73096429_06_11_2009_0405700001257499.gif" alt="" width="140" height="160" /> <img src="http://img1.liveinternet.ru/images/attach/c/2/73/96/73096233_a88977978517.gif" alt="" width="140" height="160" /></div>
</div>

CSS

<style type="text/css"><!--
/*GloriaV */
/*URL: http://tutorialgloriav.eklablog.com/*/
#containerEx14 {width: 500;
margin: 0 auto;
}
.ex14 img {
margin: 10px;
border: 2px dotted #fff; 
border-radius: 1em 0.5em;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex14 img:hover {
 opacity: 0.5; -webkit-transform: translateX(-20px); }
 -webkit-transform: translateX(5px); }
 -webkit-transform: translateX(-2px); }
opacity: 1; -webkit-transform: translateX(0); }
}
opacity: 0.5; -moz-transform: translateX(-20px); }
 -moz-transform: translateX(5px); }
 -moz-transform: translateX(-2px); }
 opacity: 1; -moz-transform: translateX(0); }
}
opacity: 0.5;-o-transform: translateX(-20px); }
 -o-transform: translateX(5px); }
 -o-transform: translateX(-2px); }
 opacity: 1; -o-transform: translateX(0); }
}
opacity: 0.5; transform: translateX(-20px); }
transform: translateX(5px); }
transform: translateX(-2px); }
opacity: 1; transform: translateX(0); }
}
--></style>