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: ：
            如：transition: all .5s ease-in-out 1s;

demo:用css3实现一个闪烁的光圈