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;
}