[分享]css动画按照曲线运动

CSS动画在 Web 开发中扮演着重要的角色。其中，曲线运动是一种非常有趣和吸引人的动画效果，本文将针对 CSS 动画按照曲线运动进行详细介绍。.curveanimation{ animationna...

CSS动画在 Web 开发中扮演着重要的角色。其中，曲线运动是一种非常有趣和吸引人的动画效果，本文将针对 CSS 动画按照曲线运动进行详细介绍。

.curve-animation{
    animation-name: curve;
    animation-duration: 2s; /*动画持续时间*/
    animation-fill-mode: forwards;
    /* 将元素位置保留在动画结束位置 */
    transform-origin: 50% 50%; /*动画中心位置*/
    animation-timing-function: cubic-bezier(0.42, 0.0, 0.58, 1.00); /*贝塞尔曲线*/
}
@keyframes curve {
    0% {transform: rotate(0deg) translate(0px, 0px);} 
    50%{transform: rotate(180deg) translate(100px, 200px);}
    100% {transform: rotate(360deg) translate(200px, 0px);}
} 

上述代码演示了一个 curve-animation 类，使用了 animation-timing-function 属性指定了贝塞尔曲线函数，它指定了动画在执行过程中，动画速度如何改变。

@keyframes 规则用来创建动画，在上述例子中，我们定义了三个关键帧，0% 代表动画开始时的属性，100% 代表动画结束时的属性，50% 代表动画执行到一半时的属性。

其中，transform: rotate(0deg) translate(0px, 0px); 表示元素不旋转，位置不变；transform: rotate(180deg) translate(100px, 200px); 表示元素旋转 180 度，并向右下角移动；transform: rotate(360deg) translate(200px, 0px); 表示元素继续旋转 360 度，并向右移动。

cubic-bezier(0.42, 0.0, 0.58, 1.00) ：这是一个经过计算后的值，它代表了一个三次贝塞尔曲线的坐标点。具体取值可以使用在线工具，根据需求来选择合适的值，也可以手动在如上网址的贝塞尔曲线坐标系中选择点。

通过上述代码，我们可以轻松实现一个按照曲线运动的动画效果，让页面更加生动有趣。