Animate.css

最新推荐文章于 2024-08-23 09:39:52 发布

dakang

最新推荐文章于 2024-08-23 09:39:52 发布

阅读量928

点赞数

分类专栏：页面前端 WAP(HTML5|iPhone|Android|手机)

页面前端同时被 2 个专栏收录

205 篇文章 0 订阅

订阅专栏

WAP(HTML5|iPhone|Android|手机)

82 篇文章 0 订阅

订阅专栏

Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，你可以直接使用到您的项目中。

要在你的项目中使用，简单的很，就是三步完成：

HTML Markup

		<div id="test">test</div>

你要有效果，首先应该确认在哪个元素上有动画效果，应该我们就需要一个元素，因此先创建一个简单的测试HTML。

1、创建动画效果：

利用keyframes来定制作动画效果，比如说下面我们制作的一个简单的“bounce”动画效果。这个效果很简单，就是在不同的的位置改变元素的在Y轴的位置，从而达到一种上下移动的效果：

		@-webkit-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
			40% {-webkit-transform: translateY(-30px);}
			60% {-webkit-transform: translateY(-15px);}
		}

		@-moz-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
			40% {-moz-transform: translateY(-30px);}
			60% {-moz-transform: translateY(-15px);}
		}

		@-ms-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
			40% {-ms-transform: translateY(-30px);}
			60% {-ms-transform: translateY(-15px);}
		}

		@keyframes bounce {
			0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
			40% {transform: translateY(-30px);}
			60% {transform: translateY(-15px);}
		}

2、设置元素的基本样式

为了让其更好看一点，给元素加上一些基本样式

		#test {
			text-align: center;
			background: #39c;
			padding: 10px;
			width: 180px;
			color: #fff;
			margin: 0 auto;
			text-shadow: 0 1px 0 rgba(0,0,0,.3);
			background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			border-radius: 5px;
			border: 1px solid #17a;
			box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
			font-weight: bold;
			
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;

			-webkit-animation-duration: 1s;
			-webkit-animation-delay: .2s;
			-webkit-animation-timing-function: ease;
			-webkit-animation-fill-mode: both;

			-moz-animation-duration: 1s;
			-moz-animation-delay: .2s;
			-moz-animation-timing-function: ease;
			-moz-animation-fill-mode: both;

			-ms-animation-duration: 1s;
			-ms-animation-delay: .2s;
			-ms-animation-timing-function: ease;
			-ms-animation-fill-mode: both;

			animation-duration: 1s;
			animation-delay: .2s;
			animation-timing-function: ease;
			animation-fill-mode: both;
		}

3、调用动画

调用动画其实很简单，我们需要一个动作来触发这个动画，那么我们在动作触发前需要完成一件事，就是在样式表中先要有这个动画存在，因此我们需要使用CSS3的animation属性：

		#test.bounce {
			-webkit-animation-name: bounce;
			-moz-animation-name: bounce;
			-ms-animation-name: bounce;
			animation-name: bounce;
		}

接下来就需要一个动作来实现，我们可以使用jq配合实现，或者页加载时完成（如果使用页面加载完成，我们只需要在div#test加上类名“bounce”就OK了，这样的话就只有一次动效果），这里我们为了更好说明问题，我们使用jQuery来触发动画效果，使用“hover”给“div#test”把类名加上去“bounce”

		$(function(){
			$('#test').hover(function(){
				$(this).addClass('bounce');
			},function(){
				$(this).removeClass('bounce');
			});
		});

效果：

具体效果请狠狠点击DEMO

上面展示的是一种简单的动画效果制作的全过程，如果你还不清楚Animation的使用，你可以先进入本站的CSS3教程组学习一下Animation。

Daniel Eden使用CSS3的animation属性给我们制作了很多这样的动画效果，大家可以直接点击下载到你的本地，仔细参考学习，当然你还可以从Github上下载。当然你还可以点击在线制作各种效果的Animate.CSS。

Daniel Eden在这里提供了在线测试效果，页面中的动画效果，你只需要点击他们的名字，你就能看到不同的动画效果。当然你也可以自己去创建你自己的动画效果，具体的创建方法可以点击《CSS3 Animation》。

我们可以使用这个Animate.css?

我们说的animate是CSS3属性之一，在IE6-8中我们是无法直接被支持的，但值得庆幸的是，在Apple Safari、Google Chrome、Mozilla Firefox都能完全支持Animate.css,据说IE10会支持这个Animate.css，我强烈建议在不支持的浏览器中使用Modernizr。

下一步做什么？

虽然现在animate只有Apple Safari、Google Chrome、Mozilla Firefox支持，但是Daniel Eden在Animate.css已经加上了相应浏览器的前缀，如：

		/*==========Webkit(safari and chrome)==============*/
		@-webkit-keyframes bounceIn {
			0% {
				opacity: 0;
				-webkit-transform: scale(.3);
			}
			
			50% {
				opacity: 1;
				-webkit-transform: scale(1.05);
			}
			
			70% {
				-webkit-transform: scale(.9);
			}
			
			100% {
				-webkit-transform: scale(1);
			}
		}
		/*==============Firefox===================*/
		@-moz-keyframes bounceIn {
			0% {
				opacity: 0;
				-moz-transform: scale(.3);
			}
			
			50% {
				opacity: 1;
				-moz-transform: scale(1.05);
			}
			
			70% {
				-moz-transform: scale(.9);
			}
			
			100% {
				-moz-transform: scale(1);
			}
		}
		/*==========IE============*/
		@-ms-keyframes bounceIn {
			0% {
				opacity: 0;
				-ms-transform: scale(.3);
			}
			
			50% {
				opacity: 1;
				-ms-transform: scale(1.05);
			}
			
			70% {
				-ms-transform: scale(.9);
			}
			
			100% {
				-ms-transform: scale(1);
			}
		}
		/*============W3C=================*/
		@keyframes bounceIn {
			0% {
				opacity: 0;
				transform: scale(.3);
			}
			
			50% {
				opacity: 1;
				transform: scale(1.05);
			}
			
			70% {
				transform: scale(.9);
			}
			
			100% {
				transform: scale(1);
			}
		}

这样当越来越多的浏览器都支技CSS3的animate时候，就能正常的运行Animate.css。

为什么不使用jQuery?

大家都知道jQuery中有一个Animate可以制作动画效果，那为什么不使用jQuery的Animate呢？主要因为CSS3的animate是一个很棒的属性，他不像jQuery的Animate靠硬件来加速。而且我们还可以使用Modernizr来检测浏览器对CSS3的animate支持程度，然后使用jQuery的Animate来制作其他浏览器不支技的动画效果。

前面也简单的提到过了，我们可以使用jQury的函数来触发动画的发生，比如给某个元素绑定相关的事件触发某个元素的动画效果，如前面的DEMO所示，我们就是使用jQuery的hover事件来触发元素的动画效果发生。

视频教程

为了更直观的说明问题，Dan Eden还给我们提供了在线的video.教程(不过要翻墙哟)。

上面就是Dan Eden的Animate.css,主要包括了：

其实这有很多效果都类似于jQuery的jQuery Easing Plugin插件中的动画效果，如果你感兴趣可以仔细对比一下。

今天在这个教程中主要介绍了CSS3的animate制作动画效果。要本教程中虽然只呈现了Daniel Eden的Animate.css一种效果。我们主要是为了从这个实例子学会的是如何使用这样的方法制作动画效果，因为效果可以说是千奇百怪，但方法都是一样的。你也可以发挥你的创造力制作一个属于你的动画效果。如果你有更好的效果记和分享哟。最后我们再一次感谢Daniel Eden在Animate.css给我们带来这么多很酷、很炫的动画效果。如果你喜欢可以直接通过下面两种方法得到Daniel Eden的Animate.css。