Question

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

我想要在应用类时使用rotateZ（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

这有点奇怪但是如果你将CSS更改为

#img-cover.twirlIn { ...

它工作正常！

Answer 2

那是因为你正在覆盖#img-cover {}中的过渡。此外，由于第二次动画时会删除类，因此转换过渡也会被删除（在这种情况下，它会被覆盖无关紧要）。

将过渡添加到#img-cover，因此应解决问题。

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

Fiddle

CSS转换不能在css转换中工作？

2 个答案: