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

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

Вопрос задан

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

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

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

.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 год 4 месяца назад

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

Подскажите пожалуйста как сделать так чтобы 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

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

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

Почта

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

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

Почта

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

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

html — CSS- переход не работает

Задавать вопрос

спросил

Изменено 9 лет, 5 месяцев назад

Просмотрено 27 тысяч раз

Привет всем. Сейчас я пытаюсь сделать переход, когда вы наводите курсор, фон становится фиолетовым, а цвет текста становится белым. (изначально цвет фона отсутствует, а цвет текста черный…)

Но это не работает!

Что я делаю не так!?

 а: наведите {
    белый цвет;
    -webkit-transition: цвет 1000мс линейный;
    -moz-переход: цвет 1000мс линейный;
    -о-переход: цвет 1000мс линейный;
    -ms-переход: цвет 1000мс линейный;
    переход: цвет 1000 мс, линейный;
    цвет фона: фиолетовый;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: фоновый цвет 1000 мс линейный;
    -ms-transition: фоновый цвет 1000 мс, линейный;
    переход: фоновый цвет 1000 мс, линейный;
}
 

Итак, ///РЕДАКТИРОВАТЬ, поскольку все твердят мне добавить его вместо a:hover…

Исходное состояние:

 text-color:black;
фон:нет;
 

Состояние наведения:

Плавный переход к:

 text-color:white;
фон: черный;
 

Надеюсь, это всем поможет Спасибо за ваше время!

  • html
  • css
  • переход

3

Поместите их на a (не при наведении), И если вы хотите несколько переходов, вы должны объявить их вместе.

 -webkit-transition: линейный цвет 1000 мс, линейный цвет фона 1000 мс;
 

http://jsfiddle.net/4zhnP/1/

1

Не устанавливайте переход для свойства :hover.

 а {
белый цвет;
-webkit-transition: цвет 1000мс линейный;
-moz-переход: цвет 1000мс линейный;
-о-переход: цвет 1000мс линейный;
-ms-переход: цвет 1000мс линейный;
переход: цвет 1000 мс, линейный;
цвет фона: фиолетовый;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: фоновый цвет 1000 мс линейный;
-ms-transition: фоновый цвет 1000 мс, линейный;
переход: фоновый цвет 1000 мс, линейный;
}
 

Затем установите, что на самом деле меняется в свойстве :hover . Например,

 a:hover{
цвет:зеленый;
}
 

2

Попробуйте установить переходы на a вместо a:hover .

Дополнительную информацию о переходах можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

1

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

[Исправлено] CSS-переходы не работают и примеры

CSS-переходы — это быстрый способ создания анимации для вашего веб-дизайна. Мы можем использовать это сокращенное ключевое слово CSS transition . При создании дизайнов я иногда не могу получить transition Свойство CSS работает правильно.

Действия по устранению проблем с неработающим переходом CSS :

  1. Проверьте правильность синтаксиса свойства перехода CSS. Убедитесь, что свойство перехода находится в самом элементе, а не в состоянии триггера элемента (например, :hover или :focus ).
  2. Переход можно применить только к анимируемым свойствам.
  3. Убедитесь, что для свойства анимации не установлено значение авто . Переходы не могут анимировать свойства CSS, которые не установлены явно и auto .
  4. Убедитесь, что свойство перехода поддерживается браузером пользователя

Убедитесь, что синтаксис вашего свойства перехода CSS верен

CSS переход — это простой способ создать анимацию (или изменить) свойство CSS через некоторое время. Обычно это делается при наведении, чтобы запустить анимацию.

Позволяет определить три варианта:

  • CSS-свойство для анимации
  • Как долго должна продолжаться анимация
  • Как должна выполняться анимация — с использованием функций синхронизации (например, линейная, плавная, плавная)

Как показано в приведенном ниже коде, синтаксис свойства перехода следующий:

 div {
  переход: <свойство> <длительность> <функция синхронизации> <задержка>;
}
/* свойство — свойство CSS, которое мы хотим анимировать. Мы можем использовать ключевое слово all, чтобы сказать, что мы разрешаем анимацию всем */
/* продолжительность - количество секунд, в течение которых должна длиться анимация */
/* функция синхронизации - функция синхронизации для использования анимации (например, линейная, плавная, плавная) */
/* задержка - количество секунд для задержки анимации */ 

Приведенный выше переход является сокращением. Если вы хотите явно указать каждый компонент, мы можем использовать следующие подсвойства.

  • transition-property — будут анимированы только перечисленные здесь свойства CSS. Ключевое слово all можно использовать, чтобы сообщить браузеру, что все свойства CSS можно анимировать, если изменить.
  • transition-duration — продолжительность анимации в секундах (с) или миллисекундах.
  • функция времени перехода — функция синхронизации того, как будет работать анимация. Например, linear будет работать постоянно. easy-in будет работать анимация быстрая в начале и медленная в конце.
  • transition-delay — задержка в секундах (s) или миллисекундах (mms)
 #delay {
  размер шрифта: 14px;
  свойство перехода: размер шрифта;
  продолжительность перехода: 4 с;
  задержка перехода: 2 с;
}
# задержка: наведите {
  размер шрифта: 36px;
} 

Совет: лучше не использовать transition-property:all

Переход можно применить только к

анимируемым свойствам

CSS содержит список свойств, которые можно сделать «анимируемыми». На самом деле это означает, что если это свойство может быть изменено с течением времени.

Например, ширина и высота — очевидные свойства, которые можно анимировать. Мы можем изменить ширину/высоту элемента CSS (анимировать его для увеличения или уменьшения и т. д.).

Примером свойства CSS, которое нельзя анимировать, являются свойства макета или типа отображения. Например flex-direction не имеет смысла как одушевляемый объект. Мы действительно можем изменить это свойство с течением времени (имеет только определенный набор значений — например, , строка , , столбец ).

Список анимируемых свойств CSS можно найти здесь:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

можно анимировать, взглянув на формальное определение . Например анимация-направление не поддерживает анимацию:

  • https://developer. mozilla.org/en-US/docs/Web/CSS/animation-direction#formal_definition

Убедитесь, что для свойства анимации не установлено значение

auto . Переходы не могут анимировать свойства CSS, которые не установлены явно и auto .

Спецификация CSS рекомендует не анимировать элементы, зависящие от значения свойства auto . Это просто означает, что мы должны явно установить значение «от» и «до», когда мы объявляем переход.

Например, ниже используется переход для свойства height:auto . height:auto просто установите высоту элемента, который будет регулироваться на основе содержание. Когда мы наводим курсор на блок, анимации нет (просто мерцание с новой высотой)

 .btn{
  высота: 100 пикселей;
  переход: все единицы;
  цвет фона: розовый;
  ширина:100%;
}
.кнопка:наведите{
    высота: авто; /* ❌ Не работает */
} 

Как видите, анимация не работает, потому что мы возимся с авто собственность.

Теперь, если мы изменим height:auto на высоту с определенным значением (например, height:200px ), мы увидим, что переход будет работать.

 .btn{
  высота: 100 пикселей;
  переход: все единицы;
  цвет фона: розовый;
  ширина:100%;
}
.кнопка:наведите{
    высота: 200 пикселей; /* ✔️ Изменить высоту на явную */
} 

Некоторые браузеры (например, реализация Gecko, например Firefox) относятся к этому более строго. Браузеры Webkit не такие строгие (например, Chrome, Safari).

Убедитесь, что свойство перехода поддерживается браузером пользователя.

Свойство перехода широко поддерживается в современных браузерах. Однако в более старых версиях Internet Explorer (IE11) и версиях Fire Fox.

Следует учитывать, что CSS-переходы должны работать в широком диапазоне браузеров:

  • Как правило, в современных браузерах вам больше не нужно использовать префиксы поставщиков. Однако, если вы хотите быть в безопасности, мы можем использовать следующее:
 -webkit-transition: все 500 мс;
   -moz-переход: все 500мс;
     -о-переход: все 500мс;
        переход: все 500 мс; 
  • Проблемы с IE 11 и ниже — не поддерживает свойство заполнения SVG, количество столбцов не поддерживается в качестве свойства анимации, свойство background-size не поддерживается
  • Safari 11 не поддерживает flex-basis в качестве анимируемое свойство CSS
  • Opera 11 не поддерживает функции синхронизации, такие как steps() , step-start() , и step-end()

Резюме

Переходы CSS — это простой способ анимировать элемент CSS при изменении его состояния (например, :hover , :focus , когда флажок установлен ввод: проверено ).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *