新方法写动画

现在必须用appframework.js 做各种效果，

语法是和jquery差不多的，没看到animate、slideUp这些，

貌似是有用自定义标签的属性来做的，还没有试过。

不过因为现在不用考虑浏览器兼容性，只要伺候chrome一位，这些东西用css3就可以轻松搞定。

需要记住几点：

transition给初始样式，写在dom的原始结构上

transform和animation给激活样式，比如hover，active，focus以及js的addClass

animation需要keyframes，keyframes配合transform得到复合效果

transform里用translate代替直接改动TRBL，scale做缩放，正负区分方向

transition: property duration timing-function delay

Property列表：

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；



2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；



3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；



4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；



5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；



6、transform list：详情请参阅：《CSS3 Transform》。



7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；



8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；



9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；



10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；



11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；



12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；



13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。

例如：

.translate{

    -webkit-transition:1s ease all;

    position:absolute;

    left:-274px;

    z-index: 999;

    top:10px;

    background:#4d6ea6;

}

对于所有属性all，都加上了transition

$("#btn").on("click",function(event) {

    $("#menu-container").css("left","0");

    $("#maincontan").css("left","274px");

});

appframework写的按钮点击事件就这样。

html中比如"#menu-container"的class为.translate，点击按钮后他的left起了变化，就会做left移动的动画效果。

animation逐帧动画：

分为两部分，一部分是执行关键帧keyframes

另一部分是定义关键帧：

.animation{

        width:82px;

        height: 82px;

        display: block;

        position: relative;

        -webkit-animation: speaker 2s infinite;

    }

            @-webkit-keyframes speaker {

                0% {

                    background: url(speaker_before.png);

                }

                50%{

                    background: url(speaker.png);

                }

                100% {

                    background: url(speaker_after.png);

                }

            }

虽然我这里采用了缩进，可以看出其实@后的css语句并不是在第一个大括号内部的，而是之同级。

用百分比来添加关键帧就可以做出不局限于from{}to{}的两帧动画。

transform: rotate | scale | skew | translate |matrix;

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

translate3D对硬件要求较高，适合smartphone和ipad这类设备

转换属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

2D Transform 方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。