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

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

Solution

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

#wrap { position: relative; }
#boat {
  background-image: url(https://i.sstatic.net/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;}
}