html怎么向下浮动,css3实现上下浮动的效果

不少前端开发者会用到css3特效，今天在做页面时用到了一个上下浮动的效果，分享一下。html>

Document

div{

background: #639;

width: 235px;

height: 216px;

position: absolute;

top: 300px;

left: 300px;

}

/*nimation-delay:1s*/

@keyframes arrow1{

0%{transform: translateY(0);}

100%{transform: translateY(20px);}

}

@-webkit-keyframes arrow1{

0%{-webkit-transform: translateY(0);}

100%{-webkit-transform: translateY(20px);}

}

.arrow{

animation: arrow1 2s infinite;

-webkit-animation: arrow1 2s infinite;

animation-timing-function:ease-in-out;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-direction:alternate;

animation-direction:alternate;

}

        

通过以上代码就能实现。