use {
  animation: move-forever 20s linear infinite;
}
use:nth-child(2) {
  animation-duration: 35s;
  animation-delay: -15s;
}
use:nth-child(1) {
  animation-duration: 50s;
}

@keyframes move-forever {
  0% {transform: translate(-2px, 0);}
  100% {transform: translate(0px, 0);}
}
/* layout only*/
body {
  margin: 0;
  overflow: hidden;
  background-color: #3498DB;
}

svg{width:100vw;height:100vh}

#my-svg {
  position: absolute;
  left: 50px;
  top: 50px;
  transform: translate(50px, 50px);
}

@keyframes example {
  from {left: 0px; background-color: yellow;}
  to {left: 200px; background-color: blue;}
}

#moving-img {
    position: absolute;
    left: 0; /* starting position */
    animation: move-img 20s linear infinite; /* move image over 10s, loop indefinitely */
}

@keyframes move-img {
    from {left: 0;} /* starting position */
    to {left: 100%;} /* end position */
}

#moving-img-reverse {
    position: absolute;
    left: 100%; /* starting position */
	top: 200px;
    animation: move-img-reverse 60s linear infinite; /* move image over 10s, loop indefinitely */
}

@keyframes move-img-reverse {
    from {left: 100%;top: 200} /* starting position */
    to {left: 0;top: 300} /* end position */
}
#moving-img-bear {
    position: absolute;
	bottom: 0;
    left: 0; /* starting position */
    animation: move-img-bear 40s linear infinite; /* move image over 10s, loop indefinitely */
	animation-delay: 5s;
}

@keyframes move-img-bear {
    from {left: 0;} /* starting position */
    to {left: 100%;} /* end position */
}

#animated_div {
width:200px;
height:50px;
background: #92B901;
color: #ffffff;
position: relative;
font-weight:bold;
font-size:40px;
padding:20px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}

@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0%  {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50%  {-moz-transform: rotate(0deg);left:500px;}
55%  {-moz-transform: rotate(0deg);left:500px;}
70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50%  {transform: rotate(0deg);left:500px;}
55%  {transform: rotate(0deg);left:500px;}
70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}