html - CSS 将效果滑入容器

Question

我想要这样的效果:

但我不能只移动内容，而让容器固定不动。如果你看到我的 fiddle ，我正在一起移动，内容和容器。甚至我想将悬停放在圆 div 上，而不是像现在这样放在内容中，因为现在当动画结束时它会失去悬停。

需要记住的一个小细节:

• 我需要在运行时更新要显示的文本，因为它应该是根据用户选择的语言进行翻译。

这是我的 fiddle

.frame {
  display: flex;
  background-color: green;
  height: 200px;
  width: 200px;
  flex-direction: center;
  justify-content: center;
  align-items: center;
}

.oval {
  display: flex;
  background-color: white;
  border-radius: 50px;
  width: 100px;
  height: 100px;
}

.box {
  display: flex;
  flex-direction: column;
  background-color: gray;
  height: 100px;
  width: 100px;
  position: relative;
  top: 25px;
  transition: top 200ms ease-in;
  border-radius: 50px;
}

.box:hover {
  top: -50px;
  transition: top 200ms ease-in;
  animation: ticker 25s cubic-bezier(1, 0, .5, 0);
}

@keyframes  ticker {
  0% {
    margin-top: 0
  }
  25% {
    margin-top: -30px
  }
  50% {
    margin-top: -60px
  }
  75% {
    margin-top: -90px
  }
  100% {
    margin-top: 0
  }
}

.box-inn {
  flex: 1;
  margin: 5%;
  color: white;
  text-align: center;
  align-items: center;
}

.first {
  background-color: blue;
}

.second {
  background-color: red;
}

<div class="frame">
  <div class="oval">
    <div class="box">
      <div class="box-inn first">
        Text 1
      </div>
      <div class="box-inn second">
        Text 2
      </div>
    </div>
  </div>
</div>

Answer 1

你可以使用伪元素。首先隐藏 :after 与 transform: translateY(100%) 和 overflow: hidden 在父级上，悬停时翻译 :before 为 100% 并将 :after 移动到 0。

.elem {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  color: white;
  border-radius: 50%;
  background: #4CA5D0;
  overflow: hidden;
}
.elem:after,
.elem:before {
  content: 'Top';
  position: absolute;
  transition: all 0.3s ease-in;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elem:after {
  content: 'Bottom';
  transform: translateY(100%);
}
.elem:hover:before {
  transform: translateY(-100%);
}
.elem:hover:after {
  transform: translateY(0);
}

<div class="elem"></div>

如果不想使用伪元素Fiddle