Question

我有以下代码，可以沿着sin波的路径动画一个球：

.ball {
  animation: animX 5s infinite linear;
}

.ball::after {
  position: absolute;
  top: 100px;
  animation: animY 5s infinite;
  background-color: green;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content:'';
  display: block;
}

@keyframes animX {
  0% {
   transform: translateX(0px);
  }
  25% {
   transform: translateX(125px);
  }
  75% {
   transform: translateX(375px);
  }
  100% {
   transform: translateX(500px);
  }
}

@keyframes animY {
  0% {
   transform: translateY(0px);
   animation-timing-function: ease-out;
  }
  25% {
   transform: translateY(-50px);
   animation-timing-function: ease-in-out;
  }
  75% {
   transform: translateY(50px);
   animation-timing-function: ease-in-out;
  }
  100% {
   transform: translateY(0px);
   animation-timing-function: ease-in;
  }
}

<div class="ball"/>

我正在尝试在此动画中再添加两个内容，仅适用于最后25％的动画：

圆圈应该加速到两倍的起始速度同样的道路。
圆圈应缩小至原始尺寸的30％

对于1.我尝试更改动画最后阶段的animation-timing-function，但它似乎扭曲了圆圈的路径，这是我不想要的。对于2.我尝试将scale(0.3)添加到transform规则中，但这也似乎弄乱了球的路径。我是否需要做一些技巧才能使这些事情独立于路径发生？

Answer 1

第一个

/* Styles go here */

.ball {
  animation: animX 5s infinite linear;
}

.ball::after {
  position: absolute;
  top: 100px;
  animation: animY 5s infinite;
  background-color: green;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content:'';
  display: block;
}

@keyframes animX {
  0% {
   transform: translateX(0px);
  }
  25% {
   transform: translateX(125px);
  }
  75% {
   transform: translateX(375px);
  }
  80% {
   transform: translateX(400px);
  }
  85% {
   transform: translateX(405px);
  }
  90% {
   transform: translateX(425px);
  }
  95% {
   transform: translateX(555px);
  }
  100% {
   transform: translateX(600px);
  }
}

@keyframes animY {
  0% {
   transform: translateY(0px);
   animation-timing-function: ease-out;
  }
  25% {
   transform: translateY(-50px);
   animation-timing-function: ease-in-out;
  }
  75% {
   transform: translateY(50px);
   animation-timing-function: ease-in-out;
  }
  100% {
   transform: translateY(0px);
   transform:scale(0.3);
   animation-timing-function:  cubic-bezier(.92,.02,.74,1.03);
  }
}

<!DOCTYPE html>
<html>
  <body>
  <div class="ball"/>
  </body>
</html>

添加变换：scale（0.3）;

100% {
   transform: translateY(0px);
   transform:scale(0.3);
   animation-timing-function: ease-in;
  }

关于第二个，我认为你需要使用立方贝塞尔定时功能 http://cubic-bezier.com/

在固定路径上加速动画

1 个答案: