css3过渡效果： hover

        transition：css样式  动画的执行时间（单位秒/毫秒） 速度类型 动画的延迟时间（单位秒/毫秒）；
            速度类型：
                linear 匀速运动，对应cubic-bezier(0,0,1,1)
                ease 平滑过渡，默认值,对应cubic-bezier(0.25,.01,.25,1)
                ease-in 加速,对应的cubic-bezier(.42,0,1,1)
                ease-out 减速,对应的cubic-bezier(0,0,.58,1)
                ease-in-out 先加速后减速,对应的cubic-bezier(.42,0,.58,1)
           注意：必须要设置动画的执行时间，否则动画执行时间为0，不会产生过渡效果
       transition： transition-property transition-duration transition-timing-function transition-delay;

2D转换：

transform: translate(x,y) 平移
    transform: translateX() 沿着x轴方向移动
    transform: translateY() 沿着y轴方向移动
    注意：水平方向向右为正，垂直方向向下为正
transform: rotate(ndeg) 旋转
    当角度为正值时，沿着顺时针方向转动n度；当角度为负值时，沿着逆时针方向转动n度
transform: scale(x,y) 缩放
   取值：0~1之间表示缩小；1表示正常大小，1以上为放大，负值表示先翻转后缩放
   transform:scaleX() 沿着x轴方向缩放
   transform:scaleY() 沿着y轴方向缩放
transform: skew(x,y) 倾斜
    transform:skewX(); 沿着x轴方向倾斜
    transform:skewY(); 沿着y轴方向倾斜

animation: animation-name animation-duration [animation-timing-function ] [animation-delay] [animation-direction];

    animation: 动画名称 动画执行时间 [动画类型] [延迟时间] [循环];

    动画播放次数：animation-iteration-count 默认值为1，infinite无限循环
    是否反向播放：
        normal 默认值，正常播放
        alternate 反向播放,动画在奇数（1,3,5）次时正向播放，偶数次时向后播放

/*定义帧动画*/
    @keyframes run {
        0%{ left:0; top: 0; }
        25%{ left: 360px; top: 0; }
        50%{ left: 360px; top: 360px; }
        75%{ left: 0; top: 360px; }
        100%{ left: 0; top: 0; }
    }
    @keyframes run2 {
        0%{ left: 0; top: 360px; }
        25%{ left: 0; top: 0; }
        50%{ left: 360px; top: 0; }
        75%{ left: 360px; top: 360px; }
        100%{ left: 0; top: 360px;}
    }