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:

Please do *NOT* just post your assignment and expect that someone is just going to do it for you! You need to do your *OWN* work. This site is for if you are stuck on a specific issue. Show us what you've tried, what *exactly* you are stuck on, and we'd be happy to help. — gen_Eric, Dec 05 '13 at 15:05

score 3 · Accepted Answer · answered Dec 05 '13 at 13:11

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

Thank You so much Rafelcastrocouto. – frooty Dec 05 '13 at 14:43 — frooty, Dec 05 '13 at 14:43

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

1 Answers1