CSS3 переход не работает - PullRequest
Новая
       21

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

11 голосов
/ 28 октября 2011

Я не смог получить переходы для работы на этой странице , кто-нибудь знает, почему? 

div.sicon a {
    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 */
}

Ответы [ 5 ]

14 голосов
/ 18 ноября 2011

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

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

5 голосов
/ 10 ноября 2018

Для меня это было 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 голосов
/ 28 января 2019

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

0 голосов
/ 17 июля 2019

HTML: 

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

CSS: 

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

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

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

0 голосов
/ 27 июня 2019

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

...