html 圆形轨迹,CSS组合动画实现弧形轨迹_html/css

本文介绍了如何利用CSS的keyframes动画和伪元素，通过分解并组合X轴和Y轴的运动来实现从A点到B点的曲线动画效果，避免了animation和transition只能实现直线运动的限制。通过在父元素和子元素上分别应用不同的动画，并同步它们的时间函数，可以创造出设计师所期望的曲线路径动画。这种方法特别适合于低端Android设备，尽管在这些设备上可能存在兼容性问题。

摘要由CSDN通过智能技术生成

CSS中的animations 以及 transitions都擅长实现从点A到点B的直线动画。无论你如何调整贝塞尔曲线，你都无法通过animation和transitions让元素沿着曲线运动。自定义线性方法可以产生弹性效果，但是X轴，Y轴上的相对运动还是相同的。

当然可以使用JavaScript来模拟动画，但其实有更简单的方式来绕过这个限制。

先看效果：

单纯对一个元素使用animation或者transition的话，那么计算机会自动选择从A点到B点之间最短的距离。那么如何实现我们想要的曲线效果呢？

拆分之后再组合

物理角度上分析，位移是矢量，我们把它分解成X方向和Y方向的运动。假设我们写了这样的动画：

@keyframes straightLine { 50% { transform: translate3D(100px, -100px, 0); }}.dot { animation: straightLine 2.5s infinite linear;}

从(0，0)移动到(-100， -100)的位置，拆分出来就是从(0，0)到(0， -100)与(0，0)到(-100， 0)的组合。

可能你的第一反应会跟我一样，这样写：

.dot { animation: xAxis 2.5s infinite linear, yAxis 2.5s infinite linear;}@keyframes xAxis { 50% { transform: translateX(100px); }}@keyframes yAxis { 50% { transform: translateY(-100px); } }

拆分成x,y轴方向上的运动，然后在animation中组合，然而效果是最后声明的动画有效，因为transform属性不能重复定义。

如何组合？

你可以试试这种方式：同一元素上没办法做到，那就拆分成父元素和子元素的动画。

父元素执行从左到右，子元素执行从下到上的动画。

为了让代码看上去更简洁，我们使用伪元素。

接着就是解决两个方向上的同步问题，为了让动画更明显，Demo使用自定义贝塞尔曲线，你也可以使用ease-in， ease-out这类内置的时间性方法。

.demo-dot { animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);}.demo-dot::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 20px; background-color: #fff; animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);}@-webkit-keyframes yAxis { 50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@keyframes yAxis { 50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@-webkit-keyframes xAxis { 50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}@keyframes xAxis { 50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}

一波操作之后，你就能实现让设计师赞不绝口的动画。

这里使用都是keyframe的动画，你也可以使用transitions，通过left,bottom等属性来实现，但是注意这种方式会每次都触发redraw,你可以看这篇文章。前端性能优化之更平滑的动画

ps:伪元素动画在低端android机子上可能会失效。

结尾

这篇文章涂鸦码龙已经翻译过，翻译得非常不错。重新整理一遍，一来是效果确实很不错，二则是为了加深理解，做了些自己的笔记，作为学习查阅之用。