.element-animation{
  animation: animationFrames linear 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 10s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 10s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 10s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(308px,197px)  rotate(0deg) ;
  }
  35% {
    transform:  translate(-27px,-24px)  rotate(22deg) ;
  }
  45% {
    transform:  translate(-74px,10px)  rotate(28deg) ;
  }
  55% {
    transform:  translate(-121px,45px)  rotate(56deg) ;
  }
  67% {
    transform:  translate(-177px,86px)  rotate(85deg) ;
  }
  79% {
    transform:  translate(-233px,128px)  rotate(136deg) ;
  }
  90% {
    transform:  translate(-285px,166px)  rotate(204deg) ;
  }
  100% {
    transform:  translate(-332px,200px)  rotate(204deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(308px,197px)  rotate(0deg) ;
  }
  35% {
    -moz-transform:  translate(-27px,-24px)  rotate(22deg) ;
  }
  45% {
    -moz-transform:  translate(-74px,10px)  rotate(28deg) ;
  }
  55% {
    -moz-transform:  translate(-121px,45px)  rotate(56deg) ;
  }
  67% {
    -moz-transform:  translate(-177px,86px)  rotate(85deg) ;
  }
  79% {
    -moz-transform:  translate(-233px,128px)  rotate(136deg) ;
  }
  90% {
    -moz-transform:  translate(-285px,166px)  rotate(204deg) ;
  }
  100% {
    -moz-transform:  translate(-332px,200px)  rotate(204deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(308px,197px)  rotate(0deg) ;
  }
  35% {
    -webkit-transform:  translate(-27px,-24px)  rotate(22deg) ;
  }
  45% {
    -webkit-transform:  translate(-74px,10px)  rotate(28deg) ;
  }
  55% {
    -webkit-transform:  translate(-121px,45px)  rotate(56deg) ;
  }
  67% {
    -webkit-transform:  translate(-177px,86px)  rotate(85deg) ;
  }
  79% {
    -webkit-transform:  translate(-233px,128px)  rotate(136deg) ;
  }
  90% {
    -webkit-transform:  translate(-285px,166px)  rotate(204deg) ;
  }
  100% {
    -webkit-transform:  translate(-332px,200px)  rotate(204deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(308px,197px)  rotate(0deg) ;
  }
  35% {
    -o-transform:  translate(-27px,-24px)  rotate(22deg) ;
  }
  45% {
    -o-transform:  translate(-74px,10px)  rotate(28deg) ;
  }
  55% {
    -o-transform:  translate(-121px,45px)  rotate(56deg) ;
  }
  67% {
    -o-transform:  translate(-177px,86px)  rotate(85deg) ;
  }
  79% {
    -o-transform:  translate(-233px,128px)  rotate(136deg) ;
  }
  90% {
    -o-transform:  translate(-285px,166px)  rotate(204deg) ;
  }
  100% {
    -o-transform:  translate(-332px,200px)  rotate(204deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(308px,197px)  rotate(0deg) ;
  }
  35% {
    -ms-transform:  translate(-27px,-24px)  rotate(22deg) ;
  }
  45% {
    -ms-transform:  translate(-74px,10px)  rotate(28deg) ;
  }
  55% {
    -ms-transform:  translate(-121px,45px)  rotate(56deg) ;
  }
  67% {
    -ms-transform:  translate(-177px,86px)  rotate(85deg) ;
  }
  79% {
    -ms-transform:  translate(-233px,128px)  rotate(136deg) ;
  }
  90% {
    -ms-transform:  translate(-285px,166px)  rotate(204deg) ;
  }
  100% {
    -ms-transform:  translate(-332px,200px)  rotate(204deg) ;
  }
}

/*
.element-animation{
  animation: animationFrames linear 20s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 20s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 20s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 20s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(250px,154px)  ;
  }
  54% {
    transform:  translate(-22px,-20px)  ;
  }
  100% {
    transform:  translate(-323px,174px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(250px,154px)  ;
  }
  54% {
    -moz-transform:  translate(-22px,-20px)  ;
  }
  100% {
    -moz-transform:  translate(-323px,174px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(250px,154px)  ;
  }
  54% {
    -webkit-transform:  translate(-22px,-20px)  ;
  }
  100% {
    -webkit-transform:  translate(-323px,174px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(250px,154px)  ;
  }
  54% {
    -o-transform:  translate(-22px,-20px)  ;
  }
  100% {
    -o-transform:  translate(-323px,174px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(250px,154px)  ;
  }
  54% {
    -ms-transform:  translate(-22px,-20px)  ;
  }
  100% {
    -ms-transform:  translate(-323px,174px)  ;
  }
}

*/