Animating CSS columns and SVG - html

Question

I am trying to make an effect in CSS to bring next to each other two columns an svg that would be an illustration of the product and some text like a description. so they "slide-in" I want to do this with many products.
But i am completely stuck.
First: the layout. I cant align the two columns (the svg and the text) vertically and i cant bring them close enough to each other.
Second: the animation. the text disappears after the animation is done but only in the browser, not in the live mode of dreamweaver.
My full code is here: http://pastebin.com/MkA7AQxA
I know this could be considered 2 different questions and should be posted separately, but maybe the problems are correlated.
Thank you very much for your help, since i am very anxious.
#wrapper {
margin: 2em auto;
width:800px;
position:relative;
padding: 4rem 0;
}
.animBlock {
margin: 4rem -4rem 0 -2rem;
padding: 0;
list-style: none;
column-count: 2;
}
.animBlock li {
position:relative;
display: block;
padding: 0;
margin: 0 2rem 2rem 0;
text-decoration: none;
break-inside: avoid;
}
.animBlock_left {
animation-name: come_left;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.animBlock_right {
animation-name: come_right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
#keyframes come_left {
0% {transform: translateX(-200px); opacity:0;}
100% {transform: translateX(0);}
}
#keyframes come_right {
0% {transform: translateX(200px); }
100% {transform: translateX(0);}
}
<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>

Answer 1

Problem 1: too much space around SVG
This is because your viewBox is absolutely ginormous. Your garbage can image is roughly 417x522, but your viewBox says it is 3000x3000. So the first step is to fix that:
<svg viewBox="135 994 417 522" ...
Problem 2: animation not working in the browser
Are you testing in Chrome or Safari by any chance? CSS animation is still not finalised, so you still need to use the -webkit- prefix on your animation and #keyframes properties. Note that you need to also have the unprefixed versions for Firefox.
#wrapper {
margin: 2em auto;
width: 200px;
position:relative;
padding: 4rem 0;
}
.animBlock {
padding: 0;
list-style: none;
column-count: 2;
}
.animBlock li {
position:relative;
display: block;
padding: 0;
margin: 0 2rem 2rem 0;
text-decoration: none;
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;
animation-name: come_left;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease;
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;
animation-name: come_right;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
#-webkit-keyframes come_left {
0% {transform: translateX(-200px); opacity:0;}
100% {transform: translateX(0);}
}
#-webkit-keyframes come_right {
0% {transform: translateX(200px); }
100% {transform: translateX(0);}
}
#keyframes come_left {
0% {transform: translateX(-200px); opacity:0;}
100% {transform: translateX(0);}
}
#keyframes come_right {
0% {transform: translateX(200px); }
100% {transform: translateX(0);}
}
<div id="wrapper" >
<ul id="bote" data-position="left" class="animBlock">
<li class="animBlock_left">
<svg x="0px" y="0px" viewBox="135 994 417 522" >
<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>