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>

保持弹跳css元素在动画css中旋转

1 个答案:

JSFiddle Link