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

Я действительно надеюсь, что мне не хватает чего-то простого здесь, потому что это сводит меня с ума.Преобразование CSS не работает в css-переходе?

Я хочу, чтобы элемент вращался в 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); 
}

источник

2013-11-14 okeegan

вы можете поиграться свой пост.! [jsfiddle.net] (http://jsfiddle.net) –

@Vivek Vikranth Это выглядит немного грубо из контекста, но вот оно: [http://jsfiddle.net/5Knku/1](jsFiddle) Нажмите на кошку в левом верхнем углу, затем нажмите на красную кошку, чтобы вернуть ее. Бекон - это тот, который должен вращаться. – okeegan

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

#img-cover.twirlIn { ...

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

источник

2013-11-14 10:26:31 graham

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

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

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

Fiddle

источник

2013-11-14 10:56:00

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

ответ

Смежные вопросы