Question

我正在尝试创建一个模拟“剪绳”效果的动画。

想象一下悬挂在两条绳索上的物体。首先，切割左边的一个，然后切割右边的一个。我已经非常接近欲望效果，但我的动画并不像我想的那样顺畅。

你可以看到对象排序反弹，我试图通过翻译整个对象来最小化。

我的问题是，有没有更好的方法来实现这种效果，或者有什么方法可以改善我的动画效果？

HTML

<div id="box"></div>
<div id="bottom"></div>

CSS

#box {
  width: 400px;
  height: 60px;
  background: black;
  margin: 100px;
  animation: ropecut 1.2s 1 ease-out;
  transform: rotateZ(0deg);
  transform: rotateZ(0);
  transform-origin: top left;
  animation-timing-function: ease-in-out;
  transform: translateY(50px)
}

#bottom {
  width: 600px;
  height: 2px;
  background: red;
  margin-top: -50px;
}

@keyframes ropecut {
        0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
  70% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    100% {transform: rotateZ(0);transform-origin: top left;animation-timing-function: ease-in-out;transform: translateY(50px)}
}

Link to JS Fiddle

Answer 1

Try this, I basically just took out the 70% bit of the keyframe and then removed the rotateZ in the 100% sequence. That will keep the bottom left corner where it should stay.

#box {
  width: 400px;
  height: 60px;
  background: black;
  margin: 100px;
  animation: ropecut 1.2s 1 ease-out;
  transform: rotateZ(0);
  transform-origin: top left;
  animation-timing-function: ease-in-out;
  transform: translateY(50px)
}

#bottom {
  width: 600px;
  height: 2px;
  background: red;
  margin-top: -50px;
}

@keyframes ropecut {
        0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
  100% {animation-timing-function: ease-in-out; transform-origin: top right;}
}

<div id="box"></div>
<div id="bottom"></div>

从绳子动画切割，纯CSS

1 个答案: