Css не работает transition: Почему не работает transition свойство? — Хабр Q&A

Leave a Comment / Css / By /

css — Почему не работает transition?

Вот тут не работает трансишн

.balance{
  overflow: hidden;
  position: relative;
}

.balance:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: -50px;
  background: red;
}

.balance:hover:before{
  transition: 0.8s;
  top: 0;
}
  • css
  • transition

1

Вы применяете transition не к тому свойству.

У вас изначально, к псевдо-элементу ::before, указано свойство bottom: -50px;, что указывает на то, что элемент «спрятан» под нижней границе родителя.
Осмелюсь предположить, что при наведение он должен плавно «показаться» снизу-вверх.
Если это так, то вы должны при наведение на родителя, «дать» псевдо-элементу ::before свойство bottom: 0, а не как указанно у вас —

top: 0;.

Вот пример:

.balance{
  overflow: hidden;
  position: relative;
}

.balance:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: -50px;
  background: red;
}

.balance:hover:before{
  transition: 0.8s;
  /*top: 0;*/
  bottom: 0;
}
<div>Наведи на меня</div>

Так же предположу, что далее последует вопрос:

почему после отведения курсора от элемента анимации нет

Отвечу:

Для этого свойство transition должно находится непосредственно в анимируемом элементе.

.balance::before {transition: 0.8s;}

Т.к. .balance:hover::before даёт понять браузеру, что анимация у псевдо-элемента должна появиться только при наведение на родитель.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Почему transition не работает?

Вопрос задан

Изменён 1 год 1 месяц назад

Просмотрен 75 раз

Подскажите пожалуйста как сделать так чтобы span «Label» плавно подымался на верх? У меня просто что-то не работает свойство transition в CSS. ..

* {
    margin: 0;
    padding: 0;
}
.div0 {
    position: relative;
    display: block;
    margin: auto;
    width: fit-content;
    margin-top: 60px;
}
input[type=text] {
    position: relative;
    width: 270px;
    border: none;
    border-bottom: 2px solid black;
    padding-bottom: 8px;
    transition: all .4s;
}
input[type=text]+span {
    position: absolute;
    left: 0;
    transition: all .6s;
}
input[type=text]:focus {
    outline: none;
    border-color: royalblue;
}
input[type=text]:focus+span {
    transition: all .4s;
    color: royalblue;
    top: -16px;
    font-size: 12px;
}
<body>
    <div>
        <input type="text" onfocusout="this.value=''">
        <span>Label</span>
    </div>
</body>
  • html
  • css

чтобы двигалось надо чтобы было задано НАЧАЛЬНОЕ и КОНЕЧНОЕ состояния

вы двигаете текст вверх и задали конечное состояние top: -16px;, но вы не задали начальное состояние top: 0;

задайте и у вас все получится

. div0 {
    position: relative;
    display: block;
    margin: auto;
    width: fit-content;
    margin-top: 60px;
}
input[type=text] {
    position: relative;
    width: 270px;
    border: none;
    border-bottom: 2px solid black;
    padding-bottom: 8px;
    transition: all .4s;
}
input[type=text]+span {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.6s;
}
input[type=text]:focus {
    outline: none;
    border-color: royalblue;
}
input[type=text]:focus+span {
    transition: all 0.4s;
    color: royalblue;
    top: -16px;
    font-size: 12px;
}
<body>
    <div>
        <input type="text" onfocusout="this.value=''">
        <span>Label</span>
    </div>
</body>
* {
    margin: 0;
    padding: 0;
}
.div0 {
    position: relative;
    display: block;
    margin: auto;
    width: fit-content;
    margin-top: 60px;
}
input[type=text] {
    position: relative;
    width: 270px;
    border: none;
    border-bottom: 2px solid black;
    padding-bottom: 8px;
    transition: all .
  4s;
}
input[type=text]+span {
    position: absolute;
    left: 0;
    transition: all .6s;
    pointer-events: none;
}
input[type=text]:focus {
    outline: none;
    border-color: royalblue;
}
input[type=text]:focus+span {
    animation: movement .6s ease-in-out;
    color: royalblue;
    top: -16px;
    font-size: 12px;
}
@keyframes movement {
  0% {
    top: 0;
  }
  100% {
    top: -16px;
  }
}
<body>
    <div>
        <input type="text" onfocusout="this.value=''">
        <span>Label</span>
    </div>
</body>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Переход CSS3 для границы не работает

Итак, вы пытаетесь использовать разметку CSS3, чтобы граница появлялась в переходе при наведении курсора на ссылку или другой элемент. Но это проявляется мгновенно! Это то, с чем я сталкивался много раз, и почему-то никто во всем Интернете не дает четкого объяснения этому. До сегодняшнего дня!

Я скажу вам почему! Это потому, что переходы не СОЗДАЮТ новые свойства CSS, они просто ПЕРЕХОДЯТ их. Перевод: вам нужно ИМЕТЬ границу ДО ТОГО, как произойдет переход. Вместо этого:

а { цвет:фиолетовый; } а: наведите { нижняя граница: сплошной розовый 1px; -webkit-transition: все 250 мс проще; -moz-transition: облегчение всех 250 мс; -ms-transition: облегчение всех 250 мс; -o-transition: все 250 мс облегчаются; переход: все 250 мс облегчение; }

1

2

3

4

5

6

7

8

10

11

a {

цвет:фиолетовый;

}

a:hover {

border-bottom:solid 1px pink;

-webkit-transition: все 250 мс легко;

-moz-transition: все 250 мс облегчение;

-ms-transition: все 250 мс облегчение;

-o-transition: все 250 мс облегчение;

переход: все 250 мс облегчение;

}

Перед наведением нужно поместить рамку на элемент «а». Я знаю, о чем вы думаете: «Но я НЕ ХОЧУ, чтобы на нем была граница перед состоянием наведения!» Ну это очень плохо! Потому что он тебе нужен. Но используйте свой мозг на этом. Как мы можем его скрыть, чтобы он ВЫГЛЯДИЛ так, будто границы нет? Простой! Сопоставьте исходный цвет границы с цветом фона. Итак, если наш фон желтый, наш новый CSS должен выглядеть так:

а { цвет:фиолетовый; нижняя граница: сплошная 1px желтая; } а: наведите { нижняя граница: сплошной розовый 1px; -webkit-transition: все 250 мс проще; -moz-transition: облегчение всех 250 мс; -ms-transition: облегчение всех 250 мс; -o-transition: все 250 мс облегчаются; переход: все 250 мс облегчение; }

1

2

3

4

5

6

7

8

1

30003

11

12

a {

цвет:фиолетовый;

border-bottom:solid 1px желтый;

}

a:hover {

border-bottom:solid 1px pink;

-webkit-transition: все 250 мс легко;

-moz-transition: все 250 мс облегчение;

-ms-transition: все 250 мс облегчение;

-o-transition: все 250 мс облегчение;

переход: все 250 мс облегчение;

}

Нет никого мудрее. Для всех остальных границы заранее НЕ БЫЛО. Вероятно, есть много других способов скрыть границу, если вы имеете дело с непрозрачностью или чем-то еще, что может помешать работе сопоставления цветов. Вероятно, вы могли бы попробовать установить высоту строки больше, чем высота элемента, и использовать overflow:hidden среди многих других творческих методов.

Надеюсь, это поможет кому-то, так как по какой-то причине Интернет не дал ответа на этот вопрос.

О Брайане Джонсоне

Брайан Джонсон — разработчик веб-сайтов и дизайнер, живущий в Миннеаполисе, штат Миннесота, страстно увлеченный программированием и WordPress. Он проводит свои дни за созданием веб-сайтов WordPress для малого бизнеса, разработкой нового кода с онлайн-сообществом и жизнью.