very simple svg animation

index.html

<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 50 750 10" width="95%" height="90%">
  
  <path id="img_1" d="m 1.754386,184.81832 739.473684,0" />
  
  
  <path id="img_2" d="m 199.12281,171.66043 46.49123,-44.73684 36.8421,44.73684 139.47368,-141.228072 89.47369,141.228072 72.80702,-67.54386 51.75438,67.54386"/>
  
  
  <path id="img_3" d="M 20.175439,170.78323 C 35.080851,133.2986 120.33636,65.910794 179.82456,168.15165 214.42151,24.045321 346.75308,59.240839 364.03509,84.818322"/>
  
  
  <path id="img_4" d="m 501.62162,57.767588 c 6.88358,-9.932284 20.07477,2.62793 21.62162,1.081081 7.17539,-7.175384 16.40695,-7.917375 23.78379,-0.54054 2.57931,2.579314 8.40745,-3.933457 10.27027,-4.864865 6.30204,-3.151023 13.41116,3.802518 16.21621,5.405405"/>
  
  

  <path id="img_5" d="m 79.459459,72.902723 c 5.945946,-3.339646 11.891892,-11.526631 17.837838,0 8.165843,-10.119892 15.435753,-8.592754 22.162163,0 5.58559,-5.782072 11.17117,-7.159966 16.75676,0"/>
  
  

  <path id="img_6" d="m 265.94595,33.443264 c 8.04054,-1.368243 12.73648,-10.261824 25.94594,0 9.92381,-8.357792 17.81208,-6.537872 24.86487,-0.540541 9.40157,-4.762123 18.51419,-7.212643 26.48648,-0.54054 l 0,0"/>
  


  <path id="img_7" d="m 632.34303,86.774381 c -4.84796,0 -9.69593,0 -14.54389,0 M 634.25,46.9375 l 12,16.4375 -12,-16.4375 z M 684.1875,96.25 710.75,104.46875 684.1875,96.25 z m -39.84375,13.90625 -17.0625,23.40625 17.0625,-23.40625 z m -8.83901,-8.20564 c -5.26952,3.16172 -10.53905,6.32343 -15.80857,9.48515 m 38.58508,-62.59201 c -0.21875,4 -0.4375,8 -0.65625,12 0.21875,-4 0.4375,-8 0.65625,-12 z M 693.0625,53.25 C 687.15625,57.885417 681.25,62.520833 675.34375,67.15625 681.25,62.520833 687.15625,57.885417 693.0625,53.25 z m -35.4375,8.8125 c -14.14047,0.115705 -26.71735,13.161675 -25.94254,27.362594 0.12811,14.211746 13.36337,26.849726 27.66028,25.819746 14.39728,-0.24678 26.93759,-14.07209 25.431,-28.479488 C 684.08183,73.33293 671.77047,61.787938 658.29425,62.064306 L 657.625,62.0625 z m -0.0312,53.15625 c -0.40625,7.16667 -0.8125,14.33333 -1.21875,21.5 1.39568,-0.21697 0.3408,-2.9531 0.74081,-4.1936 0.15931,-5.7688 0.31863,-11.5376 0.47794,-17.3064 z m -34.75,-44.875 c 3.80207,1.46875 7.60413,2.9375 11.4062,4.40625 -3.80203,-1.468744 -7.60433,-2.937536 -11.4062,-4.40625 z M 694.9375,73.5 c -4,1.46875 -8,2.9375 -12,4.40625 4,-1.46875 8,-2.9375 12,-4.40625 z m -20.875,36.65625 c 3.375,3.375 6.75,6.75 10.125,10.125 -3.375,-3.375 -6.75,-6.75 -10.125,-10.125 z"/>


  
  <path id="img_8" d="m 136.90852,161.19499 2.80076,1.88824 3.14329,-1.23673 -0.93034,3.24719 2.14752,2.60728 -3.37575,0.11862 -1.81604,2.84811 -1.15598,-3.17387 -3.26991,-0.84704 2.66131,-2.08019 z m -12.6183,13.56467 63.7224,0.63091 0,0 m -20.50473,-11.67192 0,4.4164 8.20189,0 -2.2082,-4.10094 z m -43.53313,15.14196 64.98423,0.63091 -0.63091,-11.35647 -8.51735,0 -5.04732,-6.30914 -9.14827,0 0,10.09463 -1.89274,0 0.31545,-16.08833 -40.06309,-0.63091 z m 60.88328,1.41956 c 0,2.17778 -1.76544,3.94321 -3.94321,3.94321 -2.17778,0 -3.94322,-1.76543 -3.94322,-3.94321 0,-2.17778 1.76544,-3.94322 3.94322,-3.94322 2.17777,0 3.94321,1.76544 3.94321,3.94322 z m -50.47319,0.15773 c 0,2.09066 -1.69482,3.78549 -3.78548,3.78549 -2.09067,0 -3.78549,-1.69483 -3.78549,-3.78549 0,-2.09067 1.69482,-3.78549 3.78549,-3.78549 2.09066,0 3.78548,1.69482 3.78548,3.78549 z"/>
  
  
  <path id="img_9" d="m 560.25592,127.24433 9.48515,13.91155 10.11749,-13.91155 6.32343,13.27921 6.32343,-13.27921 7.58811,13.27921 1.89703,-11.38218 -17.07326,-24.66137 z m -335.1418,18.33795 7.58811,12.64686 8.22046,-11.38217 5.05875,10.11749 6.32343,-10.74983 5.05874,10.11748 5.05875,-8.22046 -16.44092,-20.86732 z m 151.12998,-68.925387 13.2792,28.455437 16.44092,-23.396693 12.64686,27.190753 15.17624,-27.823096 13.2792,24.029036 7.58812,-23.396693 -32.88184,-53.116814 z"/>
  
  <path id="img_10" d="m 55.784062,172.92774 0,2.57069 -2.313625,0 m 27.249357,-1.54242 3.341903,6.42674 0,0 0,0 M 71.465296,167.78635 69.66581,179.0974 m 3.341902,-10.28278 -0.771208,4.37018 6.683804,0.25707 2.056556,-4.11311 z m -14.652956,2.31363 10.796915,1.02828 1.028278,-4.11311 m -5.655526,11.82519 c 0,1.98765 -1.668861,3.59897 -3.727506,3.59897 -2.058645,0 -3.727506,-1.61132 -3.727506,-3.59897 0,-1.98766 1.668861,-3.59898 3.727506,-3.59898 2.058645,0 3.727506,1.61132 3.727506,3.59898 z m -6.307543,-2.2939 -6.955773,0 c 4.742846,-3.21955 0.703286,-6.25854 18.970291,-10.11749 l 12.014517,0.63234 c 0.511168,1.89703 0.681921,3.79406 3.161715,5.69109 l 8.852803,0 c 5.368009,0.99612 3.680152,2.77623 3.161715,4.4264 -22.945311,6.75359 -25.18782,0.84381 -39.205268,-0.63234 z m 36.127593,2.80804 c 0,1.84568 -1.668862,3.3419 -3.727507,3.3419 -2.058645,0 -3.727506,-1.49622 -3.727506,-3.3419 0,-1.84568 1.668861,-3.3419 3.727506,-3.3419 2.058645,0 3.727507,1.49622 3.727507,3.3419 z" />
  
  <path id="img_11" d="m 340.67478,162.94891 c 1.12859,0.6735 1.44291,2.05121 0.70206,3.0772 -0.74086,1.02599 -2.25634,1.31174 -3.38493,0.63824 -1.12859,-0.67351 -1.44291,-2.05122 -0.70206,-3.07721 0.74051,-1.02551 2.25503,-1.31155 3.38358,-0.63904 m -1.56232,16.08075 -1.33333,-7.55556 -4.44445,-0.88889 5.33334,-4.44444 0.88889,4.88889 m 6.22222,2.22222 -4.88889,6.66667 -11.55556,0.44444 6.22223,-5.33333 -6.22223,-2.22222 -7.55555,4 8.88889,-6.22223 7.11111,2.66667 L 344,171.47329 m 0.44444,-0.88889 -5.33333,0.44445 0,0 0,0.44444 m 11.55556,8.44445 -6.22223,-9.33334 0,0 m 8.56094,5.24636 c 2.15458,1.4817 2.75465,4.51267 1.34029,6.76985 -1.41436,2.25718 -4.30755,2.88582 -6.46213,1.40411 -2.15458,-1.48171 -2.75465,-4.51267 -1.34029,-6.76985 1.4137,-2.25613 4.30505,-2.88541 6.45956,-1.40588 m -21.67495,0.40975 c 2.05198,1.41436 2.62347,4.30756 1.27647,6.46214 -1.34701,2.15458 -4.10244,2.75464 -6.15442,1.34029 -2.05198,-1.41436 -2.62347,-4.30756 -1.27646,-6.46214 1.34638,-2.15358 4.10005,-2.75426 6.15196,-1.34197"/>
</svg>
<h1 class="title">Have a nice trip!</h1>

script.js

  /*jshint -W066 */
(function(){
  'use strict';
  
  
  var svg = function(el){
    return document.getElementById(el);
  };
  
  function init(){
    var all = document.querySelectorAll('svg path');
    for (var i = 1; i < all.length+1; i++) {
      getwebkitaniimation(svg('img_'+i),i);
    }
  }
  
  // Support css3
  function getsupportedprop(proparray){
    var root=document.documentElement;
    for (var i=0; i<proparray.length; i++){
      if (proparray[i] in root.style){
        return proparray[i];
      }
    }
  }
  
  // get-webkit-aniimation(class,time)
  function getwebkitaniimation(el,time){
    
    var transition = getsupportedprop([
      'WebkitTransition', 'MozTransition',
      'msTransition','OTransition','transition'
    ]);
    
    var length = el.getTotalLength();
    
    el.style[transition] = 
      el.style[transition] = 'none';
    
    el.style.strokeDasharray = length + ' ' + length;
    el.style.strokeDashoffset = length;
    
    el.getBoundingClientRect();
    el.style[transition] = 
      el.style[transition] ='stroke-dashoffset '+
      time+
      's ease-in-out';
    el.style.strokeDashoffset = '0';
    return el;
  }
  window.onload = init();
}).call(this);

style.css

  body{
  background: #c0392b;
  position:relative;
}

.svg{
  display:block;
  margin:0 auto;
  height:500px;
}
.title{
  font-family: 'Freckle Face', cursive;
  text-align:center;
  color: #ecf0f1;
  font-size: 23px;
  -webkit-animation: title 10s 1 ease-in-out;
}
@-webkit-keyframes title{
  0%{color: #c0392b;}
}

[id^=img_]{
  stroke:#fdfdfd;
  stroke-width:1px;
  fill:none;
} 


#img_4,#img_5,#img_6{
  -webkit-animation: left 5s 5s infinite ease-in-out;
}
@-webkit-keyframes left{
  50%{-webkit-transform:translateX(20%)}
}
#img_10{
  -webkit-transform:translateX(1000px);
  -webkit-animation: car 12s 5s infinite ease-in-out;
}
@-webkit-keyframes car{
  0%{-webkit-transform:translateX(-1000px)}
}
#img_8{
  -webkit-transform:translateX(1000px);
  -webkit-animation: car2 12s 8s infinite ease-in-out;
}
@-webkit-keyframes car2{
  0%{-webkit-transform:translateX(-1000px)}
}
#img_11{
  -webkit-transform:translateX(1000px);
  -webkit-animation: ride 12s 10s infinite ease-in-out;
}
@-webkit-keyframes ride{
  0%{-webkit-transform:translateX(-1000px)}
}

very simple svg animation .markdown

very simple svg animation

css only webkit

A Pen by Moncho Varela on CodePen.

License.