html css animate,Animate.css

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

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

HTML Markup

test

你要有效果，首先应该确认在哪个元素上有动画效果，应该我们就需要一个元素，因此先创建一个简单的测试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;