animBlocks

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#wrapper {
    margin: 2em auto;
    width:800px;
    position:relative;
     padding: 4rem 0;


}

.animBlock {
    margin: 4rem -4rem 0 -2rem;
    padding: 0;
    list-style: none;
    -webkit-column-count: 2;
            column-count: 2;

}
.animBlock li {
    position:relative;
    display: block;


    padding: 0;
    margin: 0 2rem 2rem 0;
    text-decoration: none;
    -webkit-column-break-inside: avoid;
                   break-inside: avoid;

}

.animBlock_left {

    -webkit-animation-name: come_left;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;

}

.animBlock_right {


    -webkit-animation-name: come_right;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;

}

 @-webkit-keyframes come_left {
    0% {-webkit-transform: translateX(-200px); opacity:0;}
    100% {-webkit-transform: translateX(0);}
 }

 @-webkit-keyframes come_right {
    0% {-webkit-transform: translateX(200px); }
    100% {-webkit-transform: translateX(0);}
 }
</style>

</head>

<body>

 <div id="wrapper" >


        <ul id="bote" data-position="left" class="animBlock">
        <li class="animBlock_left">
         <svg   x="0px" y="0px"
     viewBox="0 0 3000 3000" enable-background="new 0 0 2400 2400" >
     <g>
    <g>
        <path fill="#BCBEC0" d="M153.1,1489.8c0,14,11.4,25.4,25.4,25.4H509c13.9,0,25.4-11.4,25.4-25.4v-406.9H153.1V1489.8z"/>
        <path fill="#D1D3D4" d="M447.8,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
            c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
        <path fill="#D1D3D4" d="M363,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
            c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
        <path fill="#D1D3D4" d="M278.2,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
            c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
        <path fill="#D1D3D4" d="M193.4,1125.6c0-7,5.7-12.7,12.7-12.7h20.8c7,0,12.7,5.7,12.7,12.7v345.2c0,7-5.7,12.7-12.7,12.7h-20.8
            c-7,0-12.7-5.7-12.7-12.7V1125.6z"/>
    </g>
    <path fill="#A7A9AC" d="M539.4,1019.2h-121v-13.1c0-7-5.7-12.7-12.7-12.7h-124c-7,0-12.7,5.7-12.7,12.7v13.1H148
        c-7,0-12.7,5.7-12.7,12.7v38.3c0,7,5.7,12.7,12.7,12.7h391.4c7,0,12.7-5.7,12.7-12.7v-38.3C552.1,1024.9,546.4,1019.2,539.4,1019.2
        z"/>
</g>
</svg>
        </li>
                           <li id="boteTxt" data-position="right" class="animBlock_right">
          <h3>The New Product</h3>
          <p>some deescription about the product</p>
       </li>
   </ul>
        </div>


</body>
</html>