html - 保持弹跳的CSS元素在动画CSS中旋转

Question

我正在使用 animate.css 来反弹元素。但是当它弹跳时，我希望它保持旋转。这是我所做的:

.rotateBounce {
     background:#fefabc;
     -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}

HTML如下

<a href="#myModal" data-toggle="modal" data-target="#myModal3" >
    <div class="col-xs-6 col-md-3 rotateBounce animated bounce" style="float:left; margin-top:22.5%;margin-left:2.5%;background:#B6EDA7" >
        <p>Road Trips</p>
    </div>
</a>

即使元素在弹跳，旋转效果似乎也被覆盖了。我尝试将内联 CSS 添加到元素中，但这似乎也不起作用。我怎样才能达到这个效果？

编辑:这是 animate 和 bounce 的 CSS

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    };
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    };
}

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

Answer 1

animate.css 中的类在某种程度上与您的自定义规则相冲突，因此您可以采取的方法是简单地用父元素包装当前元素并应用 .rotateBounce，例如

<div class="rotateBounce">
    <div class="col-xs-6 col-md-3 rotateBounce animated bounce" style="float:left; margin-top:22.5%;margin-left:2.5%;background:#B6EDA7" >
        <p>Road Trips</p>
    </div>
</div>

JSFiddle Link