knowledge

CSS 过渡与动画

# 渐变和旋转的角度单位

渐变和旋转的角度单位正数表示顺时针的角，负数表示逆时针的角
deg 度一个完整的圆是 360deg
grad 百分度一个完整的圆是 400grad
rad 弧度一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度
turn 圈数一个完整的圆是 1turn

# transform

transform 通过修改 CSS 视觉格式化模型的坐标空间来实现元素旋转、缩放、倾斜、平移

# animation-timeline

CSS animation-timeline 滚动驱动动画 (opens new window)：默认情况下，动画是随着时间的流逝而播放的，CSS 滚动驱动动画指的是将动画的执行过程由页面滚动进行接管，也就是这种情况下，动画只会跟随页面滚动的变化而变化，也就是滚动多少，动画就执行多少，时间不再起作用。

.post{
  width: 400px;
  height: 400px;
  overflow: auto;
}
.box{
  width: 50%;
  height: 20%;
  background-color: red;
  animation: scroll1 linear both; /* animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标 */
  animation-timeline: view(block 40% 20%); /*  view(block 动画开始位置 动画结束位置) */
  /** animation-timeline: scroll(block); */
}
@keyframes scroll1 {
  from{
    transform: scaleX(0);
  }
  to{
    transform: scaleX(1);
  }
}

<div class="post">
  <p>
  AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。
  </p>
  <div class="box"></div>
  <p>
  AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。
  <p>
</div>

# CSS 路径动画

div {
  width: 60px;
  height: 60px;
  background: linear-gradient(#fc0, #f0c);
  /** offset-path 接收一个 SVG 路径（与 SVG 的path、CSS 中的 clip-path 类似），指定运动的几何路径 */
  offset-path: path("M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80");
  animation: move 2000ms infinite alternate linear;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

<div></div>