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 :
- Проверьте правильность синтаксиса свойства перехода CSS. Убедитесь, что свойство перехода
:hover
или:focus
). - Переход можно применить только к анимируемым свойствам.
- Убедитесь, что для свойства анимации не установлено значение авто . Переходы не могут анимировать свойства CSS, которые не установлены явно и auto .
- Убедитесь, что свойство перехода поддерживается браузером пользователя
Убедитесь, что синтаксис вашего свойства перехода 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
, когда флажок установлен ввод: проверено
).