最近做了一些pc端的页面，用了一些动画效果，总的来说感觉还不错，大概记录下一些体会
首先，我们把pc端的动画类型分三类：
- javascript和jQuery直接控制dom属性
- css3的属性transition
- css3的animation
这三类是我目前主要使用的动画效果制作来源
javascript和jQuery直接控制dom属性
这种模式就是我们传统的js模式，或者在jquery上进行一些包装。主要是直接变化dom节点的普通属性，left，top，width，height之类的；
优点：
兼容性高，使用jQuery可以很方便兼容大多数浏览器。
缺点：
javascript的原生写法比较复杂，复杂多次变化的动画效果实现不方便
tips:
jquery下可以引用easing文件用来增强各种动画效果的表现形式，丰富animate，fadeIn，fadeOut，slideDown，slideUp等动画效果的表现形式
css3的属性transition
这种模式也是基于css3模式，最好在chrome表现，适用于各种小型动画，简单的过渡切换
优点：
使用方便，书写简单，代码量很小可以实现不俗的简单动画效果，适合做hover，active等简单的体验优化
缺点：
缺少控制方式，变化形式比较单一，不能精细控制，不适合做复杂动画
tips：
transition变化的必要几个属性（例子）：
普通变化：transition：all 2s ease-in-out 1s;
参数效果：all——所有属性参与过渡切换
2s——动画效果持续两秒
ease-in-out——慢速开始慢速结束的过渡效果
1s——从触发动画到实际开始动画的延时
3d变化：添加3d属性，后面提到；
css3的animation
这种模式同样基于css3，表现最好在chrome内，适用于各类新型较复杂的动画效果
优点：
使用方便，动画实现逻辑比较好理解，适合做各类动画效果
缺点：
关键帧要求比较高，如果动画效果要求高，可能需要多次调整关键帧设计
tips：
animation变化几个必要和属性（例子）：
普通变化：-webkit-transform: rotateX(0deg);
-webkit-animation:doll_123 2s ease-in-out 1s;
@-webkit-keyframes doll_123 {
0% {
-webkit-transform: rotateX(90deg);
}
20% {
-webkit-transform: rotateX(-40deg);
}
40% {
-webkit-transform: rotateX(30deg);
}
60%{
-webkit-transform: rotateX(-20deg);
}
80%{
-webkit-transform: rotateX(+10deg);
}
90%{
-webkit-transform: rotateX(5deg);
}
100%{
-webkit-transform: rotateX(0deg);
}
}
参数效果：-webkit-transform: rotateX(0deg)——完成动画之后的样式（这个样式必须要有，不然完成动画之后样式会回到初始状态）
doll_123——设置的变化函数设定
2s——动画效果持续时间（从0%——100%所用的时间）
ease-in-out——动画开始和结束缓慢，中间快速（还有一类变化是瞬时的，step-end，step(2)直接分解成对应的状态，没有过渡态，这样的效果适合用于背景图片的切换）
1s——从触发动画到实际开始动画的延迟时间
另：animation-iteration-count 用于设置动画播放次数。animation-direction 用于是否轮流反响播放动画 。animation-fill-mode用于设定播放完动画最后一帧状态（forwards 是最后一帧，backwards是第一帧）
3d变化（注意要配合上述三种动画实现才会有动画效果，不然只是变化不是动画）
ps： css不能实现把二维图片转化成三维图形，所以css3实现的3d效果只能是实现类似卡牌翻转或者变化，真实3d结构显示需要使用webGL，Three.js。
3d变化需要的必须属性：
-webkit-transform：perspective(600px) rotateY(180deg)；
属性说明：
perspective(600px)——用于设置视角位置，可以大概理解为对于3d变化元素的变形影响，值越小影响越大（值越小，视角越靠近屏幕，近大远小的效果越明显，类似现实生活的看书，眼镜靠书很近的时候，靠近眼镜的字看起来比远的大，如果看书距离较远，看起来的话字大小就差不多）
rotateY(180deg)——用于设置3d旋转的角度，这个是按照Y轴转动180度。
3d变化的额外属性：
-webkit-transform-origin：100% 100% 0——用于设置3的旋转的基点，变化坐标系基点在dom节点的x方向100%位置，变化坐标系基点在dom节点的y方向100%位置，z轴在0位置，（需要注意的是，改变的是坐标系的位置，不是图片位置，比较抽象，大概理解为改变基点位置的x值会改变y轴变化效果，改变基点位置的y值会改变x轴变化效果）
-webkit-transform-style：preserve-3d——用于设置3d变化，但是实际上只要在transform设置了视点位置之后都是3d变化，2d变化是没有视点的；不过加上这个属性可以明确显示是3d变化。