【问题标题】:Should I use js or css for page animations?我应该使用 js 还是 css 来制作页面动画?
【发布时间】:2015-12-05 17:52:24
【问题描述】:
我想为网站添加页面动画 - 所以在每次页面加载时,它都会轻轻地淡入整个页面。但我担心两件事:首先,seo——我不确定使用 js 或 css 是否有可能隐藏搜索引擎的内容。其次,我也担心如果js由于某种原因失败,或者人的浏览器不支持css3,那么页面根本不会显示(如果内容设置为opacity 0或display:none)
除了整个页面加载效果之外,我还希望在其他页面元素滚动到视图中时对其进行一些简单的动画处理。
我见过一些库,例如 Google 推荐的 animate.css、Animsition 和 Tween Lite。但不确定该选择哪个。什么是首选的最佳实践方法?
感谢您的帮助
【问题讨论】:
标签:
css
animation
jquery-animate
css-transitions
【解决方案1】:
我不确定使用 js 或 css 是否可能隐藏搜索引擎的内容
不会的。一般来说,搜索引擎只解析 HTML 代码,并不关心 JS/CSS。如果某些引擎会使用它们,您可以假设它足够聪明,不会误解您的动画。
页面动画应该使用js还是css?
这个问题没有确定的答案,各有利弊。 Here 是一个很好的概述。
就个人而言,我更喜欢 CSS 动画/过渡,因为它们更易于实现。
其次,我也担心如果js由于某种原因失败,或者人的浏览器不支持css3,那么页面根本不会显示
当某些技术不起作用时,请确保您的布局默认为可用状态。
例如,this JSFiddle 包含一个仅适用于 Firefox 的动画,但默认为结束状态,因此也可以在其他浏览器中使用,只是没有花哨的入口效果。
相关代码:
body {
background-color: black;
color: white;
-moz-animation: fadeIn 5s;
}
@keyframes fadeIn {
from {
background-color: white;
}
to {
background-color: black;
}
}