Переход CSS3 не работает

Ответ 1

Переход больше похож на анимацию.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

Так что вам нужно вызвать эту анимацию с действием.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Также проверьте поддержку браузера, и если у вас все еще есть проблемы с тем, что вы пытаетесь сделать! Проверьте css-overrides в своей таблице стилей, а также проверьте behavior: ***.htc css hacks.. может быть что-то переопределяет ваш переход!

Вы должны проверить это: http://www.w3schools.com/css/css3_transitions.asp

Ответ 2

Для меня это display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

Удаление и использование opacity вместо этого решило проблему.

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}

Ответ 3

Это то, что тебе надо:

http://jsfiddle.net/vSUQP/16/

Ответ 4

Общий ответ на общий вопрос... Переходы не могут анимировать свойства, которые являются автоматическими. Если переход не работает, убедитесь, что начальное значение свойства задано явно. (Например, чтобы сделать узел свернутым, когда его высота равна авто и должна оставаться такой же, вместо этого установите переход на max-height. Дайте max-height разумное начальное значение, а затем переведите его в 0)

Ответ 5

Если у вас есть <script> любом месте на вашей странице (даже в HTML, даже если это пустой тег с src), то transition должен быть активирован некоторым событием (он не будет срабатывать автоматически при загрузке страницы).

Ответ 6

HTML:

<div class="foo">
    /* whatever is required */
</div>

CSS:

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

Это просто базовый переход, чтобы облегчить тег div на 10 пикселей при наведении на него. Значения свойств перехода можно редактировать вместе со свойствами class.hover, чтобы определить, как работает переход.