如何使用动画css3在框中放置div？

Question

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

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

我正在尝试将我的圈子放到礼物图片中，圈子放到礼物图片后应该隐藏起来。

因此，我们可以将过渡分为三个阶段。如果我的圆从起点平移为200px ，那么我将旅程分为三个点A ， B ， C

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

A ---> B 100px。 （花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：悬停> .circle0

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

第二步：我认为您正在寻找CSS和动画中的关键帧。 在关键帧中，您可以设置圆的路径。 通过改变

动画：4s无限；

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

如果要翻译/设置多个元素的动画，只需添加另一个关键帧集和元素并同时运行它。 然后是关键帧的计时。 请注意，在无限循环中，键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
}