css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

css3中的3种和动画相关的属性：
   变形（transform）----描述元素的静态样式，常用于配合后两者使用，实现动画效果
   过渡(transtion)----常和hover等事件配合使用，由事件触发。只能设定头尾。所有样式属性都要一起变化。
   动画(animation)----和gif动态图差不多，立即播放。可以设定循环次数。可以设定每一帧的样式和时间。

   结论：
       如果要灵活定制多个帧以及循环，用animation.
       如果要简单的from to 效果，用 transition.
       如果要使用js灵活设定动画属性，用transition.

   transform：
       字面上就是变形，改变的意思，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。
       Transform包含了
           旋转rotate：
               通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。
               transform-origin定义旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
               如：transform:rotate(30deg): 顺时针转30度。
           扭曲skew：
               分为：
                   沿着水平方向缩放：transform:skewX(2)
                   沿着垂直方向缩放：transform:skewY(2)
                   沿着水平和垂直方向同时缩放：transform:skew(30deg,10deg)---（X,Y）而Y是一个可选参数，如果没有设置Y值，则值为0，也就是Y轴方向上无斜切
           缩放scale：
               分为
                   沿着水平方向缩放：transform:scaleX(2)
                   沿着垂直方向缩放：transform:scaleY(2)
                   沿着水平和垂直方向同时缩放：transform:scale(2,1.5)---（X,Y）而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准
           移动translate：
               分为
                   沿着x轴移动：transform:translateX(100px)
                   沿着y轴移动：transform:translateY(20px)
                   沿着x和y轴同时移动：transform:translate(100px,20px)

所以2个面板上下切换的效果就可以这样写啦：
.panel {
    height: 100%;
    transform: translateY(-100%);
    transition: all .3s linear;
    &.active {
        transform: translateY(0);
    }
}
矩阵变形matrix:

   transition:
       主要有四个属性：
           执行变换的属性：transition-property
           变换延续的时间：transition-duration
           在延续时间段，变换的速率变化transition-timing-function
               如ease：逐渐变慢
               linear：匀速
           变换延迟时间transition-delay
       transition速记法----》transition: <property> <duration> <animation type> <delay>：
           如：transition: all .5s ease-in-out 1s;