介绍一个在Chrome 112上刚刚正式推出的 CSS 动画合成属性:animation-composition。
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition[1]
日后非常有用的一个特性,快来了解一下吧
众所周知,合成抛物线运动是属性一个水平方向上匀速、垂直方向上匀加速的解下合成运动
这个其实用 CSS 动画也很好实现,水平和垂直两个方向的全新位移动画分别用不同的动画缓存函数。
有兴趣的可以参考张鑫旭的这篇文章:这回试试使用CSS实现抛物线运动效果[2]。
这里简单介绍一下。合成
实现这样的属性效果需要一个嵌套结构。
<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 个关键词:
光看语法和描述可能不知道是做什么的,特别是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[3]。
可以从动画运行的终点看出这几种合成的差异。
第一个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并不能累加,只能追加。
效果如下:
这样就得到了正常的抛物线运动了。
完整代码可以查看以下任意链接:
提一下兼容性。这方面 Safari居然跑在了前头,然后Chrome也是最近得到了正式支持,Firefox目前仍然是实验支持,不过离正式支持也不远了。也就是说这个特性以后一定会全兼容,也不用担心学着学着突然都放弃了。兼容性列表如下:
相信大家已经对动画合成有了一定的了解,下面总结一下要点:
可以用一杯水来做比方
[1]https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition。
[2]这回试试使用CSS实现抛物线运动效果: https://www.zhangxinxu.com/wordpress/2018/08/css-css3-抛物线动画/。
[3]https://codepen.io/web-dot-dev/pen/VwGRBVX: https://codepen.io/web-dot-dev/pen/VwGRBVX。
[4]CSS animation-composition (juejin.cn): https://code.juejin.cn/pen/7224474156631326775。
[5]CSS animation-composition (runjs.work): https://runjs.work/projects/2ff7e7d8c5454f37。
[6]CSS animation-composition (codepen.io): https://codepen.io/xboxyan/pen/bGmByXN。
责任编辑:姜华 来源: 前端侦探 CSS动画合成(责任编辑:焦点)
3D AI生成出新玩法了:无需数小时,只要45秒,单张图片即可生成 3D模型
海关总署:前10个月民营企业进出口15.31万亿元 占外贸总值的48.3%
Cloudera最新研究:平衡ESG与利润,引领企业可持续发展