tips:
- 同一个元素的动画书写顺序对于动画顺序的影响有先后（旋转角度影响方向）
- 使用translate的好处：
改变元素的大小位置不会影响到其他元素的布局。
2D动画
不需透视和3d效果的动画。
<style>
目标元素{
transition:属性A 时长s 速度曲线 延迟s, 属性B 时长s 速度曲线 延迟s;
//其中，曲线和延迟可以省略，只写属性，时长s
}
目标元素:hover{
transform: 动画类型(值);
//多个动画中间用空格隔开
}
</style>
参数
trasition: 改变属性，时长s, 延迟s;
transform-orign：动画参考点/轴;
transform：动画种类，值;
动画种类_写在transform里
旋转rotate(ndeg);
移动translate(npx,npx);
缩放scale(0.n,0.n);
倾斜skew(ndeg)或skew(ndeg,ndeg);
翻页回调函数动画（页面加载后自执行）
目前在fullscreen样式的h5页面中经常用到。
- Step1 翻页回调函数：先删除所有页的animate类名，再给当前父盒加上animate类名
- Step2动画元素不带animate的样式：把动画最终的呈现作为css的静态值（直接修改样式属性值的除外），transform变化到起点，元素的起点和起始值写在transform中
- Step3 动画元素带animate的样式：transition设定动画时长顺序等，transform通常设置为none（当动画为旋转、缩放、移动等）。
直接修改样式属性值的：
- 在不带animate的选择器中写起点样式（给CSS的各属性赋值）；
- 在带animate的选择器中写transition和终点样式（改变后的CSS属性和值）。
例如：
.section1 .info1 img {
margin: 0 10px; //动画开始前有间距、半透明
opacity: 0.2;
}
.section1.animate .info1 img {
margin: 0; //动画时长1秒，1秒内间距缩为0，透明度增加到100%
opacity: 1;
transition: all 1s;
}
动画为旋转、缩放、移动等的：
- 在不带animate的选择器中先写终点样式（属性与值），然后再写transform，使得元素到达动画的起点（通常与想要呈现的动画方向相反、值相同）。
- 在带animate的选择器中写transition，transform为none。这样动画将会“倒放”。
例如：
.section2 .shield img:nth-child(3){
transform-origin: right bottom; //参考点
transform: rotate(180deg) translate(-30px, -80px); //“倒序”的动画语句
}
//最终呈现：以右下角为支点，从右下方旋转180度到上面
.section2.animate .shield img:nth-child(3){
transform: none;
transition: all 1s;
}
3D动画效果
打开3d效果:
transform-style：preserve-3d;
视距（透视），对需要透视元素的父盒子添加:
perspective: npx;
参数
trasition: 改变属性，时长s, 延迟s;
transform：动画种类，值;
transform-orign：动画参考点/轴;
动画种类_写在transform里
旋转rotateX/Y/Z(ndeg);
移动translateX/Y/Z(npx);
缩放scale(0.n,0.n);
倾斜skew(ndeg)或skew(ndeg,ndeg);
复杂keyframes剧本动画
两个部分构成：元素样式中的ainimation语句，和描述动画动作的keyframes动画剧本。
注意：
非常容易在这里把animation语句写成transition，写成transition动画是不会动的呢（石乐志）。
ainimation语句
ainimation:动画名 单次时长 次数 快慢效果 延迟时长 最后帧状态;
keyframes 剧本
@keyframes 动画名{
0%{
转折点属性:参数;
}
时间点%{
转折点属性:参数;
}
时间点%{
转折点属性:参数;
}
100%{
转折点属性:参数;
}
}
2018.1.9
