Неверно что для такого свойства css как transition

Тарифы 
 

Отслеживать
задан 1 ноя 2022 в 12:46
3 1 1 бронзовый знак

У Вас лишние двоеточия здесь — background-color: 0.5s linear, color: 0.5s linear, font-weight: 0.5s linear, font-size: 5s linear; Без них всё работает, как и должно.

1 ноя 2022 в 13:12

@GeneErbin Спасибо, это сработало. Я не вижу, чтобы комментарий можно было отметить как ответ (тут просто нет зеленой/серой галочки)? Я смотрю где-то не там? В любом случае, спасибо еще раз

1 ноя 2022 в 13:40

Вы правы. Я прочитал правила сайта и обсуждения и понял, что неправильно поступил, дав ответ в комментарии. Теперь я оставил полноценный ответ, чтобы Вы могли закрыть этот вопрос. И всегда пожалуйста.

1 ноя 2022 в 15:42

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В представленном Вами коде есть синтаксическая ошибка — лишние двоеточия в перечислении свойств каждого используемого перехода (transition).

transition: background-color: 0.5s linear, color: 0.5s linear, font-weight: 0.5s linear, font-size: 5s linear; 

transition: background-color 0.5s linear, color 0.5s linear, font-weight 0.5s linear, font-size 5s linear; 

Плавные трансформации на чистом CSS. Свойство transition

CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

p < background-color: blue; transition: background-color 1s ease-in-out; >p:hover

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

• 28 февраля 2024

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот что получится в итоге:

• 7 сентября 2023

transition

Универсальное свойство, которое позволяет одновременно задать значения transition-property , transition-duration , transition-timing-function и transition-delay . Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active , а также динамически через JavaScript.

Синтаксис

Значения

none Отменяет эффект перехода.

HTML5 CSS3 IE 10+ Cr Op Sa Fx

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

[window.]document.getElementById(» elementID «).style.transition

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition .

CSS3 transition: плавные переходы

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

Например, вы можете задавать скорость перехода от обычного стиля элемента к стилю в состоянии наведенного курсора, который задается через уже знакомый нам псевдокласс :hover . Если вы проходили практику в первой части книги, то, наверное, помните, что мы уже применяли кое-где свойство transition для плавной смены цвета ссылок и прозрачности.

Рекомендуем взглянуть на примеры CSS-переходов в нашей отдельной статье.

Как создать переход transition

Чтобы реализовать переход в CSS, необходимо записать два стиля для элемента — начальный и конечный. Также к начальному стилю дописывается свойство transition с необходимыми настройками для осуществления перехода. И, наконец, чтобы воспроизвести переход, понадобится «спусковой крючок», который запустит анимацию. Самый простой пример такого «спускового крючка» — это псевдокласс :hover . В этом случае переход от начального стиля к конечному будет происходить при наведении курсора на элемент. При снятии курсора с элемента конечный стиль будет преобразован обратно в начальный.

С какими стилями срабатывает transition

Во-первых, анимированию поддаются все трансформации ( scale() , rotate() , skew() и т. д.). Во-вторых, можно создавать переходы между значениями таких свойств, как color , background , width , height , opacity и т. д. Весь перечень можно посмотреть на сайте W3.org.

Кроссбраузерность

Свойство transition понимают следующие версии браузеров:

• IE 10+;
• Edge 12+;
• Firefox 5–15 (с префиксом -moz- ), Firefox 16+ (без префикса);
• Chrome 4–25 (с префиксом -webkit- ), Chrome 26+ (без префикса);
• Safari 5.1–6 (с префиксом -webkit- ), Safari 6.1+ (без префикса);
• Opera 12.1+.

Мобильные браузеры также хорошо поддерживают данное свойство (оно не работает лишь в Opera Mini). Ранние версии таких мобильных браузеров, как iOS Safari и Android Browser, распознают свойство transition при указании префикса -webkit- .

Для наилучшего обеспечения кроссбраузерности рекомендуется добавлять вендорные префиксы при использовании свойства transition.

Из каких свойств состоит transition

Свойство transition является универсальным: в нем можно записать значения для четырех отдельных свойств сразу. Эти свойства мы будем рассматривать по отдельности. Вот их список:

• transition-property — указывает, для какого стиля будет действовать переход;
• transition-duration — определяет длительность анимации;
• transition-timing-function — скорость хода анимации;
• transition-delay — время ожидания перед началом перехода.

На следующей странице мы разберем первое свойство из списка — transition-property.