过渡、2D、3D、动画

过渡模块

---

• 过渡三要素
  1. 有属性发生变化
  2. 系统知道哪个属性发生变化（transition-property）
  3. 系统知道过渡效果持续时长（transition-duration）
• 根据三要素得必须写在要变化的标签内的属性有：

  transition-property: 值1,值2,...;
  transition-duration: 对应时长1,对应时长2,...;

• 其它属性
  transition-delay:延迟时长;
transition-timing-function:速度变化单词;
  (速度变化单词：linear、ease、ease-in、ease-out、ease-in-out）
• 连写

transition: 属性 时长 速度 延迟;
transition: 属性1 时长1 速度1 延迟1,属性2 时长2 速度2 延迟2,...;

注：多个属性运动时间/延迟都相等时，则可简写
transition:all 时长;

• 编写过渡三步骤
  1. 先不理会过渡，只编写基本页面；
  2. 修改需要过渡的属性；（三要素之一）
  3. 给被修改的属性标签添加过渡（三要素之二、三）

2D转换模块

---

• 属性：transform

  值	意义
  rotate(45deg)	旋转
  translate(5px,10px)	平移(水平,垂直)
  scale(1,1.5)	缩放(水平,垂直) 1，不变；>1，放大；<1，缩小

  注：综合写时中间空格隔开；且每一个值的改变可能会改变坐标系，要逐个判断。
• 属性：transform-origin（形变中心点）

  值(水平,垂直)	意义
  0px 3px	具体像素
  20% 30%	百分比
  center top	关键字

3D转换模块

---

• 要给父元素/祖先元素设置如下属性（透视属性）
  transform-style: preserve-3d;
• 旋转轴向
  rotateX(30deg);
  rotateY(30deg);
  rotateZ(30deg);
  注：要给父元素设置perspective:500px;才生效。
  • 只要父元素被拉伸了，子元素也会被拉伸。

动画模块

---

• 动画三要素
  1. 系统知道需要执行哪个动画（写在需要执行动画的元素内）
     animation-name: demo;
  2. 系统创建同名动画
     • 创建方式一

       @keyframes demo{
           from{
           }
           to{
           }
       }
     

     • 创建方式二

      @keyframes demo{
          0%{
          }
          25%{
          }
          50%{
          }
          75%{
          }
          100%{
          }
      }
     

  3. 系统知道动画持续时长（写在需要执行动画的元素内）
     animation-duration: 时长;
• 其它属性

  animation-delay: 3s;    (延迟)
  animation-timing-function: linear ;    (速度，同过渡模块)
  animation-iteration-count: infinite;    (动画次数)
  animation-direction: normal;    (alternate往返，normal不往返)
  animation-play-state:paused;  (paused暂停，running执行)
  animation-fill-mode: none;    (none不改变默认状态，backwards动画等待状态为第一帧样式，forwards动画结束状态为最后一帧样式，both等待与结束分别为第一帧和最后一帧样式)
  

• 连写
  animation : 名称 时长 运动速度 延迟时间 执行次数 往返动画;