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

Question

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

Answer 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;}
}

阅读更多相关信息：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations