页面动画应该用js还是css？

Question

我想向网站添加页面动画 - 这样在每次加载页面时，它都会轻轻地淡化整个页面。但我担心两件事：首先，seo - 我不确定使用 js 或 css 是否可能隐藏搜索引擎的内容。其次，我也担心，如果 js 由于某种原因失败，或者该人的浏览器不支持 css3 那么页面将根本不会显示（如果内容设置为不透明度 0 或 display:none)

除了整个页面加载效果之外，我还将寻求在其他页面元素滚动到视图中时对其进行一些简单的动画处理。

我看过 Google 推荐的一些库，例如 animate.css, Animsition and Tween Lite。但不确定去哪个。为此，首选的最佳实践方法是什么？

感谢您的帮助

Answer 1

I'm not sure if using js or css could potentially hide content from search engines

不会。一般来说，搜索引擎只解析HTML代码，并不关心JS/CSS。如果某些引擎会使用它们，您可以假设它足够聪明，不会误解您的动画。

Should I use js or css for page animations?

这个问题没有确定的答案，两者各有优缺点。 Here 是一个很好的概述。就个人而言，我更喜欢 CSS animations/transitions，因为它们更易于实现。

Secondly, I'm also worried that if the js fails for whatever reason, or the person's browser doesn't support css3 then the page won't display at all

当某些技术不起作用时，请确保您的布局默认为可用状态。例如，this JSFiddle 包含一个仅适用于 Firefox 的动画，但默认为结束状态，因此也可在其他浏览器中使用，只是没有花哨的入口效果。

相关代码：

body {
    background-color: black;
    color: white;
    -moz-animation: fadeIn 5s;
}

@keyframes fadeIn {
    from {
        background-color: white;
    }
    to {
        background-color: black;
    }
}

页面动画应该用js还是css？

Should I use js or css for page animations?

css

animation

css-transitions

jquery-animate