创建一个 HTML5 动画，用于将船从英国移动到霍巴特，如下面的屏幕截图所示：[关闭]

【问题标题】：Create a HTML5 animation for moving the boat from Britain to Hobart as given in the screenshot below: [closed]创建一个 HTML5 动画，用于将船从英国移动到霍巴特，如下面的屏幕截图所示：[关闭]
【发布时间】：2013-12-05 21:11:21
【问题描述】：

创建一个 HTML5 动画，用于将船从英国移动到霍巴特，如下面的屏幕截图所示：

【问题讨论】：

你自己做作业怎么样？
请NOT只发布您的作业并期望有人会为您完成！你需要做你的OWN工作。该网站适用于您遇到特定问题的情况。向我们展示您的尝试，究竟您遇到了什么问题，我们很乐意为您提供帮助。

标签： html html5-animation

【解决方案1】：

解决办法：http://codepen.io/rafaelcastrocouto/pen/lpBGz

#wrap { position: relative; }
#boat {
  background-image: url(http://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;}
}

【讨论】：

非常感谢 Rafelcastrocouto。