CSS3實現左右擺動和上下滑動

1、上下滑動

 #award {

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

              -webkit-animation: move 10s infinite alternate;
               animation: move 10s infinite alternate;

    }

          @-webkit-keyframes move {
               0% {top: 30px;}
               100% {top:60px;}
            }
          @keyframes move {
               0% {top: 30px;}
              100% {top:60px;}
            }

2、左右擺動

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