动画 animation - keyform

  img{
        margin-left: 50px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    /* @keyframes rotate{
        0%   {transform:rotate(0deg);}  
        100%   {transform:rotate(360deg);}
    }
    @keyframes rotateX{
        0%   {transform:rotateX(0deg);} 
        100%   {transform:rotateX(360deg);}
    }
    @keyframes rotateY{
        0%   {transform:rotateY(0deg);} 
        100%   {transform:rotateY(360deg);}
    }
    
    .rotate{
        animation:rotate 2s infinite linear;
    }
    .rotateX{
        animation:rotateX 2s infinite linear;
    }
    .rotateY{
        animation:rotateY 2s infinite linear;
    } */

   /* 
     移动
    @keyframes translate{
       0%   {transform:translate(0px,0px);}   
       50%   {transform:translate(100px,100px);} 
       100%   {transform:translate(0px,0px);}
   }
   @keyframes translateX{
       0%     {transform:translateX(0px);}   
       50%   {transform:translateX(100px);}
   }
   @keyframes translateY{
       0%   {transform:translateY(0px);}   
       100%   {transform:translateY(100px);}
   }
   
   .translate{
       animation:translate 2s infinite linear;
   }
   .translateX{
       animation:translateX 2s infinite linear;
   }
   .translateY{
       animation:translateY 2s infinite linear;
   } */


    /*@keyframes scale{
        0%   {transform:scale(0.1,0.1);}    
        50%   {transform:scale(1,1);}
        100%   {transform:scale(0.1,0.1);}
    }
    @keyframes scaleX{
        0%   {transform:scaleX(0.1);}   
        50%   {transform:scaleX(1);}
        100%   {transform:scaleX(0.1);}

    }
    @keyframes scaleY{
        0%   {transform:scaleY(0.1);}   
        50%   {transform:scaleY(1);}
    }



    .scale{
        animation:scale 2s infinite linear;
    }
    .scaleX{
        animation:scaleX 2s infinite linear;
    }
    .scaleY{
        animation:scaleY 2s infinite linear;
    }*/


    @keyframes skew{
    0%   {transform:skew(0deg,0deg);} 
    100%   {transform:skew(25deg,25deg);}
    }
    @keyframes skewX{
        0%   {transform:skewX(0deg);} 
        100%   {transform:skewX(25deg);}
    }
    @keyframes skewY{
        0%   {transform:skewY(0deg);} 
        100%   {transform:skewY(25deg);}
    }

    .skew{
        animation:skew 2s infinite linear;
    }
    .skewX{
        animation:skewX 2s infinite linear;
    }
    .skewY{
        animation:skewY 2s infinite linear;
    }