﻿<style> 
div.rood {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-duration: 4s;
}
path{
   fill: rgb(198, 0, 34);
   transform: translatex(-8000px);
   animation-name: move1;
   animation-duration: .8s;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
}
#q1{
   animation-delay: 2.8s;
}
#q2{
   animation-delay: 1.5s;
}
#q3{
   animation-delay: 0s;
}
#q4{
   animation-delay: 3.6s;
}
#q5{
   animation-delay: 5.3s;
}
#q6{
   animation-delay: 4.5s;
}
#q7{
   animation-delay: 3.0s;
}
#q8{
   animation-delay: 1.7s;
}
#q9{
   animation-delay: .3s;
}
#q10{
   animation-delay: 4s;
}
#q11{
   animation-delay: 5.1s;
}
#q12{
   animation-delay: 4.9s;
}
#q13{
   animation-delay: 3.1s;
}
#q14{
   animation-delay: 2.0s;
}
#q15{
   animation-delay: .6s;
}
#q16{
   animation-delay: 4.7s;
}
#q17{
   animation-delay: 5.8s;
}
#q18{
   animation-delay: 4.95s;
}
#q19{
   animation-delay: 3.3s;
}
#q20{
   animation-delay: 2.3s;
}
#q21{
   animation-delay: .9s;
}
#q22{
   animation-delay: 3.8s;
}
#q23{
   animation-delay: 5.2s;
}
#q24{
   animation-delay: 4.75s;
}
#q25{
   animation-delay: 3.5s;
}
#q26{
   animation-delay: 2.6s;
}
#q27{
   animation-delay: 1.2s;
}
#q28{
   animation-delay: 4.3s;
}
#q29{
   animation-delay: 4.9s;
}
#q30{
   animation-delay: 4.7s;
}
path.fast{
   animation-duration: 0.5s;
}
path.nah{
   animation-duration: 1s;
}
path.slow{
   animation-duration: 3s;
}

@keyframes move1 {
  0%   {transform: translatex(-8000);}
  100%   {transform: translatex(0);}
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
