html div 纵向,[CSS3]div上下浮动

本来想放一个抖动效果在热门搜索上，但一看代码太多了，一直抖也不顺眼，索性找了一个上下浮动(缓慢跳动)的css3效果。

循环不停跳动

/*上下跳动-不停止*/

@-webkit-keyframes bounce-down{25%{-webkit-transform:translateY(-10px)}50%,100%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(10px)}}

@keyframes bounce-down{25%{transform:translateY(-10px)}50%,100%{transform:translateY(0)}75%{transform:translateY(10px)}}

.animate-bounce-down{-webkit-animation:bounce-down 1.5s linear infinite;animation:bounce-down 1.5s linear infinite}

@-webkit-keyframes bounce-up{25%{-webkit-transform:translateY(10px)}50%,100%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(-10px)}}

@keyframes bounce-up{25%{transform:translateY(10px)}50%,100%{transform:translateY(0)}75%{transform:translateY(-10px)}}

.animate-bounce-up{-webkit-animation:bounce-up 1.4s linear infinite;animation:bounce-up 1.4s linear infinite}

仅跳动一次

/*上下跳动-仅一次*/

.animation-ud{-webkit-animation:bounce 1s .2s ease both;-moz-animation:bounce 1s .2s ease both;}

@-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)}}

把类名套进div标签就行了，貌似仅对div这种块状标签有效，所以最直接就用div了，最多加一个inline-block即可。