时间戳

首页 > 解决方案 > 如何使用动画css3将div放入框中？

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

问题描述

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

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

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

所以有可能我们可以将过渡分为三个阶段。如果我的圈子200px从起点转换为。所以我将旅程分为 3 个点A，，，BC

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
}

标签： javascriptjqueryhtmlcss

解决方案

第一步：更新你的选择器

.container:hover > .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
}

推荐阅读