javascript - 如何使用动画 css3 将 div 放入框中？

Question

我正在尝试使用transaction更改div的位置。它看起来像是掉进了礼品盒然后隐藏了

这是我的代码 https://jsbin.com/humujiyano/2/edit?html,css,output

我正在尝试将我的圈子放入礼品图片中，圈子应该在放入礼品图片后隐藏。

所以我们可以将过渡分为三个阶段。如果我的圆从起点转换为 200px。所以我将旅程分为 3 个点 A，B,C

A-->B -100px B-->C --100px

A--->B 100 像素。 (花 1 秒完成旅程，然后等待 2 秒) B--->c 100px(1秒掉落礼盒并隐藏)

.container {
  margin: 10px;
}



.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  transition: all 1.5s linear;
} 

.container:hover{
    transform: translateY(200px);
  }


.img{
  position :absolute;
  top:250px
}

Answer 1

第一步:更新选择器

.container:hover > .circle0

当您关注容器时，动画将在 circle0 上运行。您的代码将翻译整个容器。我想你只是想用圆圈移动。

第二步:我觉得你是在css和animation中寻找关键帧。在关键帧中，您可以设置圈子的路线。通过改变

animation: 4s infinite;

您可以设置动画的持续时间和重复次数。 W3School animation

如果您想翻译/动画多个元素，只需简单地添加另一个关键帧集和元素并同时运行它。然后是关于关键帧的计时。请注意，在无限循环中，关键 0% 和 100% 应该相同。

.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  transition: all 1.5s linear;
  animation: 4s infinite;
  animation-name: example;
  animation-play-state: paused;
} 

.container:hover > .circle0{
    animation-play-state: running;
  }

@keyframes example {
  0%   {
    transform: translateY(0px);
  }
  25%  {
    transform: translateY(200px);
  }
  50%  {
    transform: translateY(250px);
  }
  75%  {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0px);
  }
}

.img{
  position :absolute;
  top:250px
}