css - CSS转换在CSS转换中不起作用？

Question

我真的希望我在这里遗漏了一些简单的东西，因为这让我发疯。

我希望元素在应用类时旋转Z(360deg)，然后在删除类时返回。出于某种原因，没有发生任何转换。有任何想法吗？

CSS

#img-cover {
    content: url(../img/menu-center-plus.svg);
    border-radius: 66px;
    position:absolute;
    left:95px;
    top:95px;
    z-index: 1500;
    display:block;
    -webkit-transition: box-shadow 0.5s, opacity 1.2s, -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(55, 55, 55, 0.6);
    -webkit-transform: rotateZ(-360deg);
    opacity: 0;
}

.twirlIn {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    opacity: 1!important;
    -webkit-transform: rotateZ(360deg);
}

Answer 1

那是因为您正在覆盖#img-cover {}. 此外，由于第二次为它设置动画时该类被删除，因此变换转换也被删除（在这种情况下，它并不重要，因为它被覆盖了）。

像这样将过渡添加到您#img-cover的应该可以解决问题。

#img-cover{
   -webkit-transition: box-shadow 0.5s, opacity 2s, -webkit-transform 1s;
}

小提琴

Answer 2

It's a bit of an odd one but if you change the CSS to

#img-cover.twirlIn { ...

it works fine!