Estoy teniendo un problemas con la animación izquierda que no me funciona y con el tamaño que no me esta aplicando como el de al lado. ¿Por qué puede ser?
body{
padding: 40px;
margin: 0;
}
.container{
width: 1170px;
margin: auto;
height: 391px;
}
.col{
height: 250px;
background: -moz-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(112, 198, 171, 0.7)), color-stop(100%, rgba(70, 166, 195, 0.7)));
background: -webkit-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
background: -o-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
background: -ms-linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
background: linear-gradient(45deg, rgba(112, 198, 171, 0.7) 0%, rgba(70, 166, 195, 0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc70c6ab', endColorstr='#cc46a6c3',GradientType=1 ); width: 48%;
margin: 10px;
-webkit-border-radius: 20px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 20px;
-moz-border-radius-topleft: 0;
border-radius: 20px;
border-top-left-radius: 0;
float: left;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.21);
}
.col h2{
float: left;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-transform: uppercase;
padding-top: 12%;
font-size: 24px;
}
svg{
padding: 40px 20px 40px 40px;
margin: auto;
display: block;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="col">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="121px" height="122px" viewBox="0 0 121 122" enable-background="new 0 0 121 122" xml:space="preserve" style="float:left">
<path fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M60.783,2.302
C28.722,2.302,2.73,28.294,2.73,60.355c0,32.063,25.992,58.054,58.053,58.054c32.063,0,58.054-25.991,58.054-58.054
C118.837,28.294,92.846,2.302,60.783,2.302L60.783,2.302z"/>
<g>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M42.073,56.853c-4.032,0-7.313-3.281-7.313-7.312
c0-4.033,3.28-7.313,7.313-7.313c4.031,0,7.312,3.281,7.312,7.313C49.385,53.572,46.104,56.853,42.073,56.853z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M42.073,75.667c-2.622,0-4.755-2.215-4.755-4.939
v-2.796c-1.718-0.442-3.354-1.12-4.883-2.025l-1.979,1.98c-0.956,0.954-2.214,1.481-3.546,1.481c-1.262,0-2.436-0.481-3.307-1.352
c-1.854-1.854-1.795-4.928,0.13-6.854l1.978-1.979c-0.905-1.531-1.585-3.167-2.027-4.884h-2.794c-2.722,0-4.938-2.132-4.938-4.753
s2.216-4.753,4.938-4.753h2.793c0.442-1.718,1.121-3.355,2.024-4.887l-1.974-1.975c-1.925-1.925-1.984-4.998-0.131-6.853
c0.873-0.872,2.047-1.351,3.308-1.351c1.312,0,2.604,0.54,3.546,1.481l1.973,1.974c1.532-0.906,3.17-1.586,4.89-2.028v-2.789
c0-2.723,2.134-4.938,4.755-4.938c2.621,0,4.753,2.216,4.753,4.938v2.789c1.72,0.442,3.358,1.122,4.888,2.027l1.973-1.973
c0.958-0.957,2.216-1.481,3.549-1.481c1.261,0,2.435,0.479,3.305,1.35c1.854,1.855,1.792,4.928-0.13,6.854l-1.975,1.975
c0.905,1.533,1.583,3.169,2.024,4.887h2.793c2.723,0,4.939,2.132,4.939,4.753S65.979,54.3,63.255,54.3h-2.793
c-0.444,1.718-1.122,3.354-2.027,4.885l1.976,1.978c1.927,1.924,1.984,4.999,0.132,6.854c-0.873,0.87-2.046,1.352-3.307,1.352
c-1.332,0-2.591-0.527-3.548-1.481l-1.98-1.98c-1.529,0.905-3.167,1.581-4.881,2.023v2.8
C46.827,73.452,44.694,75.667,42.073,75.667z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.728,84.026c-3.659,0-6.638-2.979-6.638-6.639
c0-3.658,2.977-6.637,6.638-6.637c3.66,0,6.637,2.979,6.637,6.637C92.364,81.048,89.386,84.026,85.728,84.026z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.728,97.283c-2.135,0-3.872-1.798-3.872-4.009
v-1.862c-1.155-0.318-2.261-0.775-3.306-1.37l-1.315,1.315c-0.776,0.775-1.797,1.204-2.878,1.204c-1.027,0-1.986-0.393-2.696-1.105
c-1.508-1.51-1.466-4.009,0.097-5.57l1.317-1.32c-0.594-1.041-1.053-2.148-1.371-3.304h-1.857c-2.212,0-4.01-1.737-4.01-3.871
s1.798-3.872,4.01-3.872h1.855c0.32-1.155,0.777-2.263,1.371-3.307l-1.315-1.315c-1.563-1.563-1.604-4.062-0.099-5.571
c0.712-0.714,1.672-1.105,2.699-1.105c1.08,0,2.102,0.428,2.877,1.2l1.312,1.313c1.045-0.594,2.152-1.054,3.308-1.37v-1.855
c0-2.21,1.739-4.009,3.873-4.009s3.871,1.799,3.871,4.009v1.855c1.156,0.318,2.265,0.776,3.307,1.37l1.313-1.313
c0.775-0.773,1.796-1.2,2.878-1.2c1.026,0,1.984,0.392,2.695,1.104c1.509,1.511,1.466,4.009-0.098,5.573L98.38,70.21
c0.594,1.043,1.054,2.15,1.37,3.307h1.856c2.212,0,4.01,1.738,4.01,3.871c0,2.136-1.799,3.874-4.01,3.874h-1.858
c-0.318,1.154-0.776,2.261-1.371,3.304l1.316,1.315c1.564,1.566,1.606,4.065,0.098,5.573c-0.711,0.713-1.669,1.105-2.696,1.105
c-1.08,0-2.104-0.428-2.877-1.202L92.9,90.04c-1.044,0.594-2.148,1.052-3.303,1.369v1.863
C89.599,95.485,87.86,97.283,85.728,97.283z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M30.104,48.726c0,0,0.794-11.238,11.309-10.909"/>
</g>
<h2>Geolocalización 1.0 0</h2>
</svg>
</div>
<div class="col">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="121px" height="122px" viewBox="0 0 121 122" enable-background="new 0 0 121 122" xml:space="preserve" style="float:left">
<path class="path" fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M60.783,2.302
C28.722,2.302,2.73,28.294,2.73,60.355c0,32.063,25.992,58.054,58.053,58.054c32.063,0,58.054-25.991,58.054-58.054
C118.837,28.294,92.846,2.302,60.783,2.302L60.783,2.302z"/>
<g>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,45.762H35.813
c-2.115,0-3.676-0.538-4.77-1.644c-1.849-1.869-1.818-4.723-1.783-8.027c0.006-0.454,0.01-0.918,0.01-1.392
c0-0.474-0.004-0.938-0.01-1.391c-0.035-3.305-0.065-6.159,1.783-8.027c1.094-1.106,2.654-1.645,4.77-1.645h49.941
c2.115,0,3.676,0.538,4.771,1.645c1.849,1.868,1.816,4.722,1.781,8.027c-0.006,0.454-0.01,0.918-0.01,1.391
c0,0.473,0.004,0.938,0.01,1.392c0.035,3.304,0.065,6.158-1.781,8.027C89.43,45.224,87.869,45.762,85.754,45.762z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,71.651H35.813
c-2.115,0-3.676-0.537-4.77-1.645c-1.849-1.869-1.818-4.725-1.783-8.025c0.006-0.455,0.01-0.92,0.01-1.393
c0-0.475-0.004-0.938-0.01-1.394c-0.035-3.304-0.065-6.158,1.783-8.027c1.094-1.106,2.654-1.644,4.77-1.644h49.941
c2.115,0,3.676,0.538,4.771,1.644c1.849,1.869,1.816,4.723,1.781,8.027c-0.006,0.454-0.01,0.918-0.01,1.394
c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.156-1.781,8.025C89.43,71.114,87.869,71.651,85.754,71.651z"/>
<path class="path" fill="#fff" d="M69.284,61.12c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0
c0-0.646,0.525-1.169,1.171-1.169h5.424C68.762,59.951,69.284,60.476,69.284,61.12L69.284,61.12z"/>
<path class="path" fill="#fff" d="M74.021,63.834c-0.646,0-1.172-0.366-1.172-0.817v-3.79c0-0.451,0.522-0.818,1.172-0.818l0,0
c0.646,0,1.169,0.367,1.169,0.818v3.79C75.189,63.469,74.665,63.834,74.021,63.834L74.021,63.834z"/>
<path class="path" fill="#fff" d="M86.198,61.12c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
c0-0.646,0.525-1.169,1.171-1.169h5.424C85.676,59.951,86.198,60.476,86.198,61.12L86.198,61.12z"/>
<path class="path" fill="#fff" d="M69.284,87.245c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0c0-0.646,0.525-1.17,1.171-1.17
h5.424C68.762,86.075,69.284,86.601,69.284,87.245L69.284,87.245z"/>
<path class="path" fill="#fff" d="M74.021,89.959c-0.646,0-1.172-0.366-1.172-0.817v-3.789c0-0.451,0.522-0.818,1.172-0.818l0,0
c0.646,0,1.169,0.367,1.169,0.818v3.789C75.189,89.594,74.665,89.959,74.021,89.959L74.021,89.959z"/>
<path class="path" fill="#fff" d="M86.198,87.245c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
c0-0.646,0.525-1.17,1.171-1.17h5.424C85.676,86.075,86.198,86.601,86.198,87.245L86.198,87.245z"/>
<path class="path" fill="#fff" d="M69.284,34.697c0,0.646-0.524,1.172-1.17,1.172H62.69c-0.646,0-1.171-0.522-1.171-1.172l0,0
c0-0.646,0.525-1.169,1.171-1.169h5.424C68.762,33.528,69.284,34.053,69.284,34.697L69.284,34.697z"/>
<path class="path" fill="#fff" d="M74.021,37.411c-0.646,0-1.172-0.366-1.172-0.817v-3.79c0-0.451,0.522-0.818,1.172-0.818l0,0
c0.646,0,1.169,0.367,1.169,0.818v3.79C75.189,37.046,74.665,37.411,74.021,37.411L74.021,37.411z"/>
<path class="path" fill="#fff" d="M86.198,34.697c0,0.646-0.524,1.172-1.17,1.172h-5.424c-0.646,0-1.171-0.522-1.171-1.172l0,0
c0-0.646,0.525-1.169,1.171-1.169h5.424C85.676,33.528,86.198,34.053,86.198,34.697L86.198,34.697z"/>
<path class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M85.754,97.075H35.813
c-2.115,0-3.676-0.537-4.77-1.645c-1.849-1.867-1.818-4.725-1.783-8.025c0.006-0.455,0.01-0.918,0.01-1.393
c0-0.477-0.004-0.938-0.01-1.393c-0.035-3.305-0.065-6.16,1.783-8.025c1.094-1.105,2.654-1.646,4.77-1.646h49.941
c2.115,0,3.676,0.539,4.771,1.646c1.849,1.869,1.816,4.723,1.781,8.025c-0.006,0.453-0.01,0.918-0.01,1.393
c0,0.473,0.004,0.938,0.01,1.393c0.035,3.303,0.065,6.158-1.781,8.025C89.43,96.538,87.869,97.075,85.754,97.075z"/>
<line class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" x1="60.783" y1="45.762" x2="60.783" y2="48.729"/>
<line class="path" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" x1="60.783" y1="71.651" x2="60.783" y2="74.354"/>
</g>
<h2>ATMService 1.0 0</h2>
</svg>
</div>
</div>