Create a HTML5 animation for moving the boat from Britain to Hobart as given in the screenshot below:

Question

Create a HTML5 animation for moving the boat from Britain to Hobart as given in the screenshot below:

Answer 1

The solution: http://codepen.io/rafaelcastrocouto/pen/lpBGz

#wrap { position: relative; }
#boat {
  background-image: url(https://i.stack.imgur.com/kKL72.jpg);
  background-position: -205px -203px;
  width: 25px; height: 25px;
  border-radius: 50%;
  position: absolute;
  border: 1px solid white;
  top: 55px; left: 60px;
  animation: travel 5s linear infinite;
}
@keyframes travel {
  0% {top: 55px; left: 60px;}
  15% {top: 80px; left: 20px;}
  30% {top: 110px; left: 5px;}
  50% {top: 150px; left: 35px;}
  70% {top: 200px; left: 70px;}
  100% {top: 200px; left: 200px;}
}

Read more about it: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations