乐趣区

关于前端:了解一下全新的CSS动画合成属性animationcomposition

jiezi

介绍一个在 Chrome 112 上刚刚正式推出的 CSS 动画合成属性：animation-composition

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition

日后十分有用的一个个性，快来理解一下吧

一、从 CSS 抛物线静止说起

家喻户晓，抛物线静止是一个程度方向上匀速、垂直方向上匀减速的合成静止

这个其实用 CSS 动画也很好实现，程度和垂直两个方向的位移动画别离用不同的动画缓存函数

有趣味的能够参考张鑫旭的这篇文章：这回试试应用 CSS 实现抛物线静止成果

这里简略介绍一下

实现这样的成果须要一个嵌套构造

<div class="ball-x">
  <div class="ball-y"></div>
</div>

而后里外设置不同的动画缓冲函数

.ball-x {animation-timing-function: linear; /* 匀速直线静止 */}
.ball-y {animation-timing-function: cubic-bezier(.55, 0, .85, .36);  /* 大抵匀加速运动 */
}

静止合成成果如下：

那么问题来了，为啥这里须要用到两层标签呢？仅仅为了合成程度静止和垂直静止吗？如果只应用一层标签会怎么样？

🤔🤔🤔

这个稍后再说

二、动画合成属性

当初来介绍明天的配角。首先看语法，还是非常简单的

/* 单个值 */
animation-composition: replace; 
animation-composition: add;/* 追加 */
animation-composition: accumulate;/* 混合 */
/* 多个值，暂不探讨 */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

次要是这 3 个关键词：

  • replace：笼罩（默认值）。动画会笼罩原有属性。
  • add：追加。动画追加到原有属性前面。
  • accumulate：累加。动画会和原有属性雷同的局部进行累加。

光看语法和形容可能不晓得是做什么的，特地是 add 和accumulate，差别十分奥妙，间接看一个例子。

假如有一个元素，默认有一些款式

div{
  transform-origin: 50% 50%;
    transform: translateX(50px) rotate(45deg);
}

而后，给一个动画，关键帧是这样的

@keyframes adjust {
  to {transform: translateX(100px);
  }
}

上面是 3 个关键词的成果比照

demo 参见 https://codepen.io/web-dot-dev/pen/VwGRBVX

能够从动画运行的起点看出这几种合成的差别。

第一个 replace，也就是默认成果。其实就是间接将transform 中的 translateX(50px) rotate(45deg) 变成了translateX(100px)。

第二个 add。能够了解成间接在transform 后追加，也就是最初变成了translateX(50px) rotate(45deg) translateX(100px)，等同于先向右挪动50px，而后旋转45deg，再向右挪动100px。上面是拆解过程（留神旋转轴）

第三个 accumulate。能够了解成将已有的translateX(50px) 累加，最初后果是translateX(150px) rotate(45deg)

怎么样，这几种差别明确了吗？😁

当然这些动画合成都是针对于 雷同的属性 而言，对于不同的属性，原本就没有产生任何烦扰，天然不会用到这个个性。

三、再来看抛物线静止

当初回过头来看后面那个例子。如果只用一层标签如何实现？🤔

假如程度、垂直两个方向的动画关键帧是这样的

@keyframes ballMoveX {
    100%{transform: translateX(300px) 
    }
}
@keyframes ballMoveY {
    100% {transform: translateY(300px)
    }    
}

而后小球将这两个动画合起来

.ball{
    animation: 
    ballMoveX 1s linear infinite alternate, 
    ballMoveY 1s cubic-bezier(.55, 0, .85, .36) infinite alternate;
}

能够失去一个很奇怪的动画

起因其实是这两个属性抵触了，前面的动画笼罩了后面的，导致动画的完结点其实是translateY(300px)

像这种状况下，用动画合成属性就十分适合了

.ball{
    ...
      animation-composition: add; /*accumulate 也行 */
}

add和 accumulate 都行，因为 translateX 和translateY并不能累加，只能追加。

成果如下

这样就失去了失常的抛物线静止了

残缺代码能够查看以下任意链接：

  • CSS animation-composition (runjs.work)
  • CSS animation-composition (codepen.io)

四、兼容性和总结

提一下兼容性。这方面 Safari竟然跑在了前头，而后 Chrome 也是最近失去了正式反对，Firefox目前依然是试验反对，不过离正式反对也不远了。也就是说这个个性当前肯定会全兼容，也不必放心学着学着忽然都放弃了。兼容性列表如下：

置信大家曾经对动画合成有了肯定的理解，上面总结一下要点：

能够用一杯水来做比如

  1. replace：替换。将这杯水倒掉，而后倒进一杯油
  2. add：追加（叠加）。在这杯水上倒入一些油，油笼罩在了水上
  3. accumulate：累加（混合）。在这杯水倒入奶茶，外面都有水，混合在了一起

当然，最重要的一点是，只有碰到一些 有抵触的动画时 才须要思考用这个个性，你学到了吗？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版