CSS Slide effect into container

Question

I'd like to get this effect:

But I cant move only the content, leaving fixed the container. If you see my fiddle, I'm moving all together, the content and the container. And even I'd like to put the hover on the circle div, not in the content like it is right now, because now when the animation ends it losing the hover.

A little detail to keep in mind:

• I need to update at runtime the text to display due it should be translated depending on the language selected by the user.

Here is my 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

You can use pseudo-elements. First hide :after with transform: translateY(100%) and overflow: hidden on parent, and on hover you translate :before for 100% and move :after to 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>

If you don't want to use pseudo-elements Fiddle