@keyframes ciudad {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -55184px 0;
    }
}
@keyframes farolas {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -55184px 0;
    }
}
@keyframes camion {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

body
{
    font-family: ProximaNova, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 100;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-attachment: fixed;
}


.home .comercio {
    padding: 85px 0 0 0;
    background: #f8f9fd;
}
.home .comercio .animacion {
    position: relative;
    height: 300px;
    margin-top: 222px;
}
.home .comercio .animacion .ciudad {
    position: absolute;
    top: -301px;
    height: 611px;
    width: 100%;
    background-image: url(http://fontaneriamateos.es/images/animacion/pueblosfondo.png);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 34649px;
    animation-name: ciudad;
    animation-timing-function: linear;
    animation-duration: 130s;
    animation-iteration-count: infinite;
}
.home .comercio .animacion .camion,
.home .comercio .animacion .ruedas {
    left: 20%;
    width: 200px;
    height: 107px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
}
.home .comercio .animacion .ruedas {
    bottom: 2px;
    background-image: url(http://fontaneriamateos.es/images/animacion/ruedines.png);
}
.home .comercio .animacion .camion {
    bottom: 4px;
    background-image: url(http://fontaneriamateos.es/images/animacion/furgo.png);
    animation-name: camion;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
.home .comercio .animacion .farolas {
  position: absolute;
bottom: -161px;
height: 274px;
width: 100%;
background-image: url(http://fontaneriamateos.es/images/animacion/farolas.png);
background-position: 0 0;
background-repeat: repeat-x;
background-size: 34602px!important;
animation-name: farolas; 
animation-timing-function: linear;
animation-duration: 129.3s;
animation-iteration-count: infinite;


.home .comercio .animacion .carretera {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: #32394c;
}