CSS-преобразование не работает в CSS-переходе?

Я действительно надеюсь, что упускаю что-то простое здесь, потому что это сводит меня с ума.

Я хотел бы, чтобы элемент 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);
}

2 ответа

Это немного странно, но если вы измените CSS на

#img-cover.twirlIn { ...

работает отлично!

Это потому, что вы перезаписываете переход в #img-cover {}, Кроме того, так как класс удаляется, когда вы анимируете его во второй раз, преобразовательный переход также удаляется (в данном случае это не имеет значения, поскольку он перезаписывается).

Добавьте переход к вашему #img-cover как таковой должен решить проблему.

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

скрипка

Другие вопросы по тегам