CSS3实现上下滑动和左右摆动

初接触CSS，在学习基础CSS知识的同时试着接触CSS3的有关知识。

今天首先学习到CSS3的 animation属性，将图片实现上下滑动：

 
   
   
   
   

 

然后实现左右摆动，样式为：

            #award {

               position: absolute;
      top: 30px;
               left: 365px;

              -webkit-animation: shake 10s infinite;
              animation: shake 10s infinite;

              -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;

    }

         @-webkit-keyframes shake{
             50% { -webkit-transform: rotate(-10deg); }
             100% { -webkit-transform: rotate(10deg); }
          }
        @keyframes shake{
             50% { -webkit-transform: rotate(-10deg); }
  100% { -webkit-transform: rotate(10deg); }
         }