- Не работает свойство transition?
- Не работают :hover и :transition
- Вопрос
- lokonaft
- 2 ответа на этот вопрос
- Рекомендованные сообщения
- Присоединяйтесь к обсуждению
- Похожие публикации
- Почему не работает transition у высоты, заданной в процентах?
- 3 ответа 3
- 2.20. CSS3-переходы
- Создание плавных изменений свойств элементов
- Поддержка браузерами
- 1. Название свойства transition-property
- 2. Продолжительность перехода transition-duration
- 3. Функция перехода transition-timing-function
- 4. Задержка перехода transition-delay
- 5. Краткая запись перехода
- 6. Плавный переход нескольких свойств
- 7. Примеры переходов для различных свойств
- Как я могу сделать этот hover transition?
- 3 ответа 3
Не работает свойство transition?
Добрый день. При наведении на фото должен срабатывать transition. То есть плавно появляться фон и текст.
Скрытый текст:
.about-text <
display: none;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 15px;
position: absolute;
top: 0;
bottom: 0;
transition: 1s;
>
При наведении:
.about-item:hover .about-text <
background: rgba(0, 0, 0, 0.75);
display: flex;
>
- Вопрос задан более трёх лет назад
- 297 просмотров
Есть «дискретные*» свойства. Те, значения которых могут принимать ограниченное число вариантов, они как правило обозначены специальными словами. Например, свойство display может принимать значения none, block, inline и т.д. Свойство text-decoration — none, underline, line-through и т.д. К таким свойствам нельзя применить плавный переход (transition) из одного состояния в другое, потому что между этими состояниями нет промежуточных значений. То же самое относится к свойству z-index, он не может принимать дробных значений, background-image — картинка или есть или ее нет, или она просто сменяется на другую.
Напротив «недискретные» свойства могут плавно перетекать из одного состояния в другое. Преимущественно они заданы числом. Сюда же относится цвет, потому что цвет — это тоже число. Примеры таких свойств: left, width, background-position, font-size и т.д.
Запомните это, и не пытайтесь анимировать «дискретные» свойства.
* «дискретные» — мой термин, я не знаю как правильно их называть.
transition с display не работает
используйте для скрытия:
Источник
Не работают :hover и :transition
Спросил lokonaft,
28 августа 2018
Вопрос
lokonaft
Люди добрые, помогите разобраться, весь день пытаюсь понять почему у меня не получается.
В общем идея была сделать одну красную кнопку, чтобы при наведении появлялось еще 4 зеленых.
Реализовать попытался 2мя очень похожими способами, через div и через список.
https://codepen.io/lokonaft/pen/GXqBBP — в данном случае почему то не работает transition
https://codepen.io/lokonaft/pen/qMNMVL — в данном случае я то ли не могу правильно задать hover, то ли я чего то не понимаю
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
.navigation <
background-color: rgba(31, 30, 30, 0.438);
width: 900px;
height: 30px;
>
.navigation li <
display: inline-block;
padding: 5px 15px;
&:hover <
content: «»;
background-color: rgb(36, 36, 36);
cursor: pointer;
>
>
a <
color: black;
text-decoration: none;
font-family: sans-serif;
&:hover <
content: «»;
color: white;
>
>
Не могу закруглить углы у background-color. В чем проблема?
Добрый вечер, ребята.
Вторые сутки блуждаю в сети и не могу найти ответ на свой вопрос.
.niz:hover <
background: red;
этим кодом я получил возможность менять цвет определенного блока наведением курсора, вопрос в следующем.
Как делать, что бы после каждого наведения цвет менялся на другой а не на один и тот же. То есть зеленый, красный, оранжевый и так далее, спасибо большое
Источник
Почему не работает transition у высоты, заданной в процентах?
Почему пропадет transition при указании % соотношения?
Если указать height: 500px работает плавный переход, если указать height: 100% раскрытие проходит мгновенно.
Подскажите почему и как правильно изменить код.
3 ответа 3
В твоём коде 100% на самом деле означают auto , поскольку у контейнера не задана высота.
Если её задать, то плавное разворачивание будет.
Понял, как сделать, чтобы transition заработал без указания высоты.
Пусть высота всегда будет auto, а изменяется максимальная высота:
Хотя это не совсем так работает, как надо. Анимируется весь диапазон max-height, а не высота.
Свойство height относится к свойствам, которые лучше не анимировать, потому что анимировать желательно всего два свойства — opacity и transform .
При анимации height браузер начинает перерасчитывать макет, а значит на каждом фрейме анимации будет вызвана перерисовка. Чтобы этого избежать, в нашем случае, будем анимировать transform .
Для начала, необходимо вынести объект, который будем анимировать, в отдельный композиционный слой — это делается при помощи will-change: transform или по-старинке transform: translateZ(0) . А после этого уже можно воспользоваться трюком с transform: scaleY(0) / scaleY(1) .
Самостоятельно разницу можно пощупать в Developer Tools → Console → esc → Rendering → Paint Flashing.
Источник
2.20. CSS3-переходы
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .
Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).
Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after . Для задания всех свойств перехода обычно используют краткую запись свойства transition .
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.
Создание плавных изменений свойств элементов
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
| transition-property | |
|---|---|
| Значения: | |
| none | Отсутствие свойства для перехода. |
| all | Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента. |
| свойство | Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Продолжительность перехода transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
| transition-duration | |
|---|---|
| Значения: | |
| время | Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
3. Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
| transition-timing-function | |
|---|---|
| Значения: | |
| ease | Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) . |
| linear | Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) . |
| ease-in | Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) . |
| ease-out | Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) . |
| ease-in-out | Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
| Пользовательское название | Значение функции |
|---|---|
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
| easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. Задержка перехода transition-delay
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
| transition-delay | |
|---|---|
| Значения: | |
| время | Время задержки перехода указывается в секундах или миллисекундах. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Краткая запись перехода
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись
6. Плавный переход нескольких свойств
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
7. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
Источник
Как я могу сделать этот hover transition?
Я пытаюсь повторить этот transition с сайта uber.design:
Дело в том, что я застрял в обратном transition :
3 ответа 3
Все хорошо, но лучше такое решать через before и after, есть возможность перемещать объекты, навешивать анимации итп. Если сделать два псевдокласса то можно сделать так как будто рамка растет вокруг и пропадает также.
Описание подходов решения (варианты не единственные это только примеры): Вводное: Все объекты, а именно div и span преобразованы в inline-block , что позволит встраивать их в любое место, без переноса строк, а также добавлены padding для отступов, курсор ассоциируется в poiner и самое главное для этих примеров задано относительное позиционирование position: relative
Далее по отдельным примерам:
- Добавляем блоку псевдоэлемент after который позволит создать далее варианты анимации (1,2,3) этот объект позиционируется absolute слева внизу с шириной в 2px и длинной на весь объект. После остается добавить только вариант анимации, для того чтобы анимация была плавной используем transition задав время анимации в 300ms и отслеживая только свойство transform которое и будет производить анимацию. Последним действием навешиваем transform: scaleX(0) что уменьшит объект на 0 по оси абсцисс (X) для того чтобы анимация была из угла в угол зададим трансформацию от правого нижнего угла(точнее им закончится) transform-origin: right bottom . Последний шаг добавим действия при наведении мышки на родителя, путем задания scaleX(1) и для того чтобы казалось что процесс идет с противоположного угла пока мышка над родителем задается точка трансформирования нижний левый угол.
- Пример тот же что и первый за исключением того что правый угол верхний склуглен и задана высота 100%. Что позволило сделать эффект выползания и уползания червя )))
- Третий пример повторяет второй, только не имеет скругления и позиционируется вверху.
- Чуть более усложнен, добавлен еще один элемент before который анимируется уже по вертикали. Что позволяет сделать рост их угла.
- Это еще один вариант решения, в котором для выполнения анимации добавлены 4 элемента span, данных элементов может быть и больше все зависит от задачи. Данные элементы прижаты к краям поочередно, т.к. не задан transform-origin они растут изменяю размер относительно своего центра.
Источник