Html动画内容如何答案

【问题标题】：Html animated content how toHtml动画内容如何
【发布时间】：2017-11-05 22:58:19
【问题描述】：

我有一个任务需要生动的动画屏幕内容，就像下面的示例一样。我很好奇这个例子是怎么做的，css，sprite，gif，video？它显示、滑动屏幕、动画滚动条、分页、移动图标等都作为一个独立的电影计时。对于如何制作以下内容以及如何高效运行的任何想法将不胜感激。

http://urban-walks.com/#slides

【问题讨论】：

标签： jquery css animation html5-video css-sprites

【解决方案1】：

CSS 使用动画。 HubbBlog is a great source for coding information. https://www.w3schools.com/css/css3_animations.asp W3Schools 也有一个很好的教程。 Javascript 也最有可能用于感知用户在页面上的位置。

【讨论】：

好的，谢谢，我确实认为这可能是 CSS 和 JavaScript 的强大之处。动画手机屏幕似乎需要做很多工作，取而代之的是 html 视频可以节省时间。我想有利有弊。

【解决方案2】：

<style>

body
{
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    font-size: 25px;

}

@-webkit-keyframes example {
    0%   {background-color: lightgreen; left:-200px; top:0px;}
    25%  {background-color: lightgreen; left:0px; top:0px;}

}

/* Standard syntax */
@keyframes example {
    0%   {background-color: lightgreen; left:-200px; top:0px;}
    25%  {background-color: lightgreen; left:0px; top:0px;}
</style>

【讨论】：

这个答案缺乏解释。没有回答最初的问题。