Question

以下是我想逐步创建的动画：

点位于左上角
点对角线向右下角扩展
扩展点缩小到右下角的点

这是完成第1步和第1步的a snippet。 2但我不知道如何做第3步。

将点旋转-45度使其对角线展开：

.a 
  top: 0
  left: 0
  background-color: $slack-green
  transform: rotate(-45deg)
  transform-origin: top left
  animation: slack-animation-a $duration infinite

然后，它是这样的动画：

@keyframes slack-animation-a 
  0%
    top: 0 
    height: $dot-diameter

  33%
    top: 0
    height: $slack-size

body {
  background-color: #DDD;
}
.c-slack {
  position: relative;
  z-index: 100;
  margin: 80px auto;
  width: 96px;
  height: 96px;
}
.c-slack_dot {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 9px;
}
.a {
  top: 0;
  left: 0;
  background-color: #3eb991;
  transform: rotate(-45deg);
  transform-origin: top left;
  animation: slack-animation-a 2s infinite;
}
@keyframes slack-animation-a {
  0% {
    top: 0;
    height: 18px;
  }
  33% {
    top: 0;
    height: 96px;
  }
}

<div class="c-slack"><span class="c-slack_dot a"></span>
</div>

感谢任何帮助和建议！

Answer 1

您可以通过在为动画配置的关键帧中设置相应的height以及top和left设置来实现此目的。

关键帧代码（Sass）：

@keyframes slack-animation-a 
  0%
    top: 0px
    left: -$dot-diameter/2
    height: $dot-diameter

  33%
    top: 0px
    left: -$dot-diameter/2
    height: ceil($slack-size * 1.414)

  66%, 100%
    top: round($slack-size - $dot-diameter / 1.3667)
    left: round($slack-size - $dot-diameter * 1.1667)
    height: $dot-diameter

帧数为66％，100％都是必需的，因为66％的帧是线变为点的时间，100％帧使得元素保持动画的三分之一的最终状态（点）持续时间。如果没有100％的框架，只要它再次成为一个点，元素就会滑回原来的状态（左上角的点）。没有66％的框架，就会发生类似的事情。因此，如果元素需要在其最终位置看，那么两个帧都是关键的。

<强>段：

＆＃13;

body {
  background-color: #DDD;
}
.c-slack {
  position: relative;
  z-index: 100;
  margin: 80px auto;
  width: 96px;
  height: 96px;
}
.c-slack_dot {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 9px;
}
.a {
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transform: rotate(-45deg);
  transform-origin: top;
  animation: slack-animation-a 2s infinite;
}
@keyframes slack-animation-a {
  0% {
    top: 0px;
    left: -9px;
    height: 18px;
  }
  33% {
    top: 0px;
    left: -9px;
    height: 136px;
  }
  66%,
  100% {
    top: 83px;
    left: 75px;
    height: 18px;
  }
}

＆＃13;

<div class="c-slack"><span class="c-slack_dot a"></span>
</div>

＆＃13;

CodePen Demo

CSS动画诊断移动点

1 个答案: