CSS 的三个基本动画属性 transform transition animation

//transition   transition all 2s ease 2s
    <p>第一个参数  表示的是要变化的css属性名称 要是很多就直接设置为all</p>
    <p>第一个参数  表示的是动画执行的时间</p>
    <p>第一个参数  表示的是速度效果的深度曲线</p>
    <p>第一个参数  表示的过度效果什么时候开始  设置为2s   表示2s之后</p>
    
    
    //transform  主要的属性有  主要介绍的都是2d动画
    <p>translate   移动  translateX(100px) 向右移动   translateY(100px)  向左移动</p>
    <p>scale       缩放  scaleX(1.2)  scaleY(1.2)</p>
    <p>rotate      旋转  rotate(180deg)  </p>
    <p>skew        倾斜  skew(30deg,30deg) </p>

    //transform-origin  修改变相或者旋转的中心位置   变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

   transform-origin取值为center（或center center或50% 或50% 50%）：  圆点为元素的中心位置

   transform-origin取值为top left(或left top或0 0)：  就是以左边顶端为圆心位置

   transform-origin取值为right top（或top right或100％ 0）：      就是以右边顶端为圆心位置

 

  transform-origin取值为bottom right（或right bottom或100％ 100％）:  就是以右边底端为圆心位置

   transform-origin取值为left bottom（或bottom left 或 0 100％）:      就是以左边底端为圆心位置

    
    //animation 属性
    <pre>
        animation: myfirst 1s linear 2s infinite alternate;
        @-webkit-keyframes myfirst{
            from {transform:translateX(10px);}
            to   {transform:translateX(100px);}
        }
        
        @-webkit-keyframes myfirst{
            0     {transform:translateX(10px);}
            50%   {transform:translateX(100px);}
            100%  {transform:translateX(200px);}
        }
        
    </pre>

ps  

transition  transform animation  @keyframes 基本上都是IE10及其以上版本才支持的