C3过渡与动画(笔记)

1. 2D转换 transfrom

1.1 translate 平移 (px)

• translate(X,Y)，translate3d(X,Y,Z)
• translate的百分比是根据自身来设置的
• 设置translate不会影响其他元素的排列
• 给行内元素设置没有效果

1.2 rotate 旋转 (deg)，默认为Z轴

• 和平移配合使用时，一般先平移后旋转

1.3 transfrom-origin 旋转中心

• 默认值为 50% 50%
• 可以使用 top、right、bottom、left这四个属性
• 也可以使用px，比如20px 40px，距离左边20px，上边40px
• 百分比同理

1.4 scale 缩放，默认为Z轴

2. 过渡 transition

• transition-property：需要过渡的属性
• transition-duration：过渡时长
• transition-timing-function：过渡的运动曲线
• transition-delay：过渡的延迟
• 简写：transition: 谁来做过渡 过渡时长 运动曲线 过渡延迟 ;

3. 动画 animation

• animation-name：动画名称
• animation-duration：动画时长
• animation-timing-function：运动曲线
  • linear： 匀速
  • ease： 慢-快-慢 默认值
  • ease-in： 慢-快
  • ease-out： 快-慢
  • ease-in-out： 慢-快-慢
  • steps()，步长动画
• animation-delay：延迟时长
• animation-iteration-count：运动次数
  • infinite：无限
• animation-direction：运动方向
  • normal：默认值
  • reverse：反向运行
  • alternate：正-反-正…
  • alternate-reverse：反-正-反…
  • 后面两个与循环次数有关
• animation-fill-mode：动画等待或者结束的状态
  • forwards：动画结束后，元素样式停留在 100% 的样式
  • backwards：在延迟等待的时间内，元素样式停留在 0% 的样式
  • both：同时设置了 forwards和backwards两个属性值
• animation-play-state：暂停与播放
  • running：播放
  • paused：暂停
• 复合写法：animation: 名称 时长 曲线 延时 运动次数 运动方向 等待或结束的状态;
• 也可以多动画使用逗号隔开

需要在css中定义动画函数

<style>
  @keyframes 动画名 {
    0% {}
    50% {}
    100% {}
      
   /* 或者 */
    from {}
    to {}
  }
</style>

4. 3D转换

4.1 3维坐标系

• x轴 水平向右
• y轴 垂直向下
• z轴 垂直屏幕

4.2 3d移动 translate3d

• transform: translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离

4.3 景深 perspective

• 人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大

• perspective 就是用来设置 人 和 物体 的距离

4.4 转换样式 transform-style

• 设置元素的子元素是位于 3D 空间中还是平面中

4.5 3d旋转 rotate3d

• transform: rotate3d(x, y, z, deg) 沿着自定义轴旋转 deg为角度
• 比如(1, 0, 0.5, 90deg)，x轴为90度，y轴为0度，z轴为45度
• transform: rotate; 默认旋转z轴

4.6 3D缩放 scale3d

• transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
• transform: scaleX(1); 只缩放宽
• transform: scaleY(1); 只缩放高
• transform: scaleZ(1); 只缩放厚
• transform: scale(0.5); 默认是缩放X和Y

4.7 视距原点 perspective-origin

• 和transfrom-origin一样只不过这个是3D的视角来看