css3实现上下浮动的效果

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

    
    
    
        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;
        }
    


    

        
    

通过以上代码就能实现。

演示地址：http://www.cnwenhui.cn/d/demo/fudong/