25% {
-webkit-transform: translateY(-3px)
}
50%, 100% {
-webkit-transform: translateY(0)
}
75% {
-webkit-transform: translateY(3px)
}
}
@keyframes bounce-down {
25% {
transform: translateY(-3px)
}
50%, 100% {
transform: translateY(0)
}
75% {
transform: translateY(3px)
}
}
.animate-bounce-down{
-webkit-animation: bounce-down 1.3s linear infinite
animation: bounce-down 1.3s linear infinite
}
如果不考虑低版本兼容，css3动画可以简单实现，给需要漂浮的元素添加animate-bounce-down这个类就好，浮动效果可以自行调试
因为你的样式名写法问题，.new #box；这个就已经指定了id为box的div外层必须要有一个class为new的div，否则无法调取box这个样式你要么把.new #box直接写为#box
或者把<div id="box"></div>
改成
<div class="new">
<div id="box"></div>
</div>
最后补充，hover这个伪类在IE6中是不支持的
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
