Question

我想制作一些像这样的动画：当我将鼠标悬停在包含一些从头开始可见的图像和文本的div上时，其他div位于文本下方，图像位于“fadeInUp”，（此动画取自animate.css https://daneden.github.io/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;
}

类.service_box_first和.text-vcenter用于使用.text-vcenter类垂直居中div内的内容。函数service（）和serviceOut（）用于使用文本为div设置动画。动画在这里：

    @-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;
    }

element css animation - 一个元素将其他元素推高

0 个答案: