html - 动画div无法转换CSS

Question

我有一个动画 div:

但到目前为止，弹跳和闪烁动画覆盖了我的悬停命令。似乎无论我在 :hover 代码中放入什么，都没有任何反应!

fiddle :http://jsfiddle.net/L731nuxw/

我试图模仿的行为: https://clus.io

<div class="info-container">
              <div class="transition-up" style={{ paddingBottom: '20%' }}>
                <h3>
                  <b>
                    Pick Web
                  </b>
                </h3>
              </div>
              <div class=img-parent>
                <img class="image-yo" src=https://placeimg.com/640/480/any>
              </div>
              <div class="bounce transition-down">
                Hover to see more
              </div>
              <div class="transition-down" style={{ paddingTop: '20%' }}>
                Learn More >
              </div>
            </div>

Answer 1

这行得通吗？...

查看 Clusio 上的示例...您不应该将转换放在“选择网络”和“了解更多”...

    .transition-up,
    .bounce-and-flicker,
    .transition-down,
    .image-yo {
        transition: all .6s;
    }

    .info-container:hover>.transition-up {
        transform: translateY(-50vh);
    }

    .info-container:hover>.transition-down {
        transform: translateY(50vh);
        opacity: 0;
    }

    .info-container:hover>.bounce-and-flicker {
        opacity: 0;
    }

    .info-container:hover>.img-parent>.image-yo {
        opacity: 100;
    }

    .image-yo {
        opacity: 0;
        position: absolute;
    }

    .img-parent {
        position: relative;
    }

    .info-container:hover>.bounce {
        display: none;
    }

    .bounce {
        -webkit-animation: bounce-and-flicker 0.5s infinite;
        -moz-animation: bounce-and-flicker 0.5s infinite;
        -o-animation: bounce-and-flicker 0.5s infinite;
        animation: bounce-and-flicker 3s infinite;

    }

    @-webkit-keyframes bounce-and-flicker {
        0% {
            opacity: 0;
            transform: translate(0, 0px);
        }

        55% {
            transform: translate(0, -15px);
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: translate(0, -0px);
        }
    }

    @-moz-keyframes bounce-and-flicker {
        0% {
            opacity: 0;
            transform: translate(0, 0px);
        }


        55% {
            transform: translate(0, -15px);
            opacity: 1;
        }



        100% {
            opacity: 0;
            transform: translate(0, -0px);
        }

    }

<div class="info-container">
        <div class="transition-up" style={{ paddingBottom: '20%' }}>
            <h3>
                <b>
                    Pick Web
                </b>
            </h3>
        </div>
        <div class=img-parent>
            <img class="image-yo" src=https://placeimg.com/640/480/any> </div> <div class="bounce transition-down">
            Hover to see more
        </div>
        <div class="transition-down" style={{ paddingTop: '20%' }}>
            Learn More >
        </div>
    </div>