曲线动画

CSS

实现方式

运动合成

• 将曲线运动分解为若干个方向
• 并设定不同的运动速度
  • use::CSS3 animation动画
• child::多个动画叠加

路径动画

• css 路径动画

  • use::

    css motion path

    梗概

    • offset-path：接收一个 [use::SVG 路径]（与 SVG 的path、CSS 中的 clip-path 类似），指定运动的几何路径
    • offset-distance：控制当前元素基于 offset-path 运动的距离
    • offset-position：指定 offset-path 的初始位置
    • offset-anchor：定义沿 offset-path 定位的元素的锚点。 这个也算好理解，运动的元素可能不是一个点，那么就需要指定元素中的哪个点附着在路径上进行运动
    • offset-rotate：定义沿 offset-path 定位时元素的方向，说人话就是运动过程中元素的角度朝向

    示例

    div:nth-child(2) {
        width: 40px;
        height: 40px;
        background: linear-gradient(#fc0, #f0c);
        offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
    }
    @keyframes move {
        0% {
            offset-distance: 0%;
        }
        100% {
            offset-distance: 100%;
        }
    }

    

    指向原始笔记的链接

  指向原始笔记的链接