H5与CSS3动画基础

tips:

1. 同一个元素的动画书写顺序对于动画顺序的影响有先后（旋转角度影响方向）
2. 使用translate的好处：
   改变元素的大小位置不会影响到其他元素的布局。
   
   

2D动画

不需透视和3d效果的动画。

参数

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（当动画为旋转、缩放、移动等）。

直接修改样式属性值的：

1. 在不带animate的选择器中写起点样式（给CSS的各属性赋值）；
2. 在带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;
}

动画为旋转、缩放、移动等的：

1. 在不带animate的选择器中先写终点样式（属性与值），然后再写transform，使得元素到达动画的起点（通常与想要呈现的动画方向相反、值相同）。
2. 在带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