Javascript 元素css动画-一个元素推高另一个元素

我想制作一些像这样的动画： 当我将鼠标悬停在div上时，该div包含一些从一开始就可见的图像和文本，另一个div位于文本和图像下方，指向“fadeInUp”（此动画取自animate.css）。但当我将div设置为fadeInUp时，上面的文本和图像就会跳起来。我想使文本和图像在div fadeInUp时平滑地向上移动。这是我的代码，我希望它更容易理解：

    <div class="service_box_first" onmouseover="service();" onmouseleave="serviceOut();">
         <div class="text-vcenter">
              <div class="index_service_heading" id="naslov">
                   <img src="images/brandingIkona.png"/>
                    <div>BRANDING</div>
              </div>
              <div class="index_service_description animated" id="text">
                   Some text
              </div>
         </div>
    </div>

.service_box_first {
        display: table;
        position: relative;
    }

.text-vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.index_service_description {
    line-height: 18px;
    text-align: justify;
    overflow: hidden;
    padding: 20px;
    font-size: 16px;
    width: 80%;
    max-width: 300px;

    margin-left: auto;
    margin-right: auto;
}

---

请发布涉及的JavaScript，或者更好，使用此提琴向我们展示您的问题这是期望的结果吗？

    @-webkit-keyframes fadeInUp {
          0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
            height: 0px;
          }

          100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
              height: 150px;
          }
        }

        @keyframes fadeInUp {


   0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }

    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
    }