CSS3 Animation Cheat Sheet 功能齐全的 CSS 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库，为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站，为你想要添加动画效果的元素应用预制的 CSS 类就可以了。
使用方法
CSS3 Animation Cheat Sheet 是一套预置的，即插即用的动画库，您所需要做的就是将样式表添加到您的网站，并将预先制作好的CSS类应用到您想要动画的元素中。
使用 CSS3 @keyFrame，您不必担心元素的位置来容纳动画，它将被动画化。对于使用旧浏览器的用户来说，即使动画不触发，动画元素也将是可见的和到位的。下面是关于如何开始的说明。
将动画样式表添加到网页的<head>元素：
<link rel="stylesheet" href="css/animations.css">- 替换 CSS 带有动画样式表所在目录的名称。
向您想要动画的元素添加一个动画类：
<div id="object" class="slideUp">- 替换 slideUp 使用所需的动画类。
对于入门动画，您需要通过添加 visibility: hidden 属性设置为动画元素：
#object{
background-color: #fe5652;
visibility: hidden;
}- visibility: hidden 用于在激活动画之前隐藏元素。
这些动画的值与元素的大小有关。这意味着更大的图像有更夸张的动画和更小的图像有更微妙的动画。虽然这些动画很容易实现，但是可以随意调整样式表中的值以获得正确的效果。
动态添加动画效果
默认情况下，这些动画将在页面加载时触发--即使元素在页面的下方--但是通过使用jQuery，您可以通过多种方式激活动画。
将jQuery添加到网页的 <head> 元素中：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>将其添加到 </body> 标记之前，以便在用户滚动到元素时触发动画：
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});- 替换
animatedElement使用所需动画元素的 ID 或 Class 类。 - 替换
slideUp动画类。 - 400 表示元素与屏幕顶部之间的空格。当元素是 400px 从屏幕的顶部。增加这个数字，使动画激活更快。
将其添加到 </body> 标记之前，以在用户单击元素时触发动画：
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});- 替换
animatedElement使用所需动画元素的ID或类。 - 替换
slideUp动画类。
相关链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论