transition
Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов , таких как :hover или :active или установлены динамически с помощью JavaScript.
- transition-delay (en-US): 0s
- transition-duration : 0s
- transition-property (en-US): всё
- transition-timing-function (en-US): ease
- transition-behavior (en-US): normal
- transition-delay (en-US): как указано
- transition-duration : как указано
- transition-property (en-US): как указано
- transition-timing-function (en-US): как указано
- transition-behavior (en-US): как указано
Синтаксис
/* Применить к 1 свойству */ /* имя свойства | длительность */ transition: margin-left 4s; /* имя свойства | длительность | задержка */ transition: margin-left 4s 1s; /* имя свойства | длительность | временная функция | задержка */ transition: margin-left 4s ease-in-out 1s; /* Применить к 2 свойствам */ transition: margin-left 4s, color 1s; /* Применить ко всем изменённым свойствам */ transition: all 0.5s ease-out; /* Глобальные значения */ transition: inherit; transition: initial; transition: unset;
Свойство transition указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.
Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям all и none ). Это включает в себя:
- ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
- ключевое слово none
- ключевое слово all
- именование свойства CSS.
Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.
Формальное описание синтаксиса
transition =
# (en-US)=
[ (en-US) none | (en-US) ] (en-US) || (en-US)
|| (en-US)
|| (en-US)=
all | (en-US)=
linear | (en-US)
| (en-US)
| (en-US)
=
linear( )=
ease | (en-US)
ease-in | (en-US)
ease-out | (en-US)
ease-in-out | (en-US)
cubic-bezier( , , , )=
step-start | (en-US)
step-end | (en-US)
steps( , ? (en-US) )=
[ (en-US) ] (en-US) # (en-US)=
jump-start | (en-US)
jump-end | (en-US)
jump-none | (en-US)
jump-both | (en-US)
start | (en-US)
end=
&& (en-US)
? (en-US)=
(en-US)Примеры
Примеры CSS переходов включены в главную статью о CSS переходах.
Спецификации
Specification CSS Transitions
# transition-shorthand-propertyСовместимость с браузерами
BCD tables only load in the browser
Web-разработка — тест с ответами Синергия — 2023
Перед покупкой проверяйте актуальность вопросов в описании.
Для удобства поиска воспользуйтесь клавишами CTRL + F
Комментарии: 1. К возможностям PHP следует отнести …
произведение только простых вычислений
защищенную обработку данных, шифрование
то, что данные хранимые на сервере, защищены
то, что PHP поддерживает общение с другими программами на сервере без помощи технических протоколов
2. К счетчикам, используемым в социальных сетях, относится …
3. К недостаткам графического дизайна следует отнести …
ограничение творческого потенциала дизайнера
принадлежность к старой школе
то, что для создания адаптивного дизайна нужно прорисовывать отдельный макет
то, что в графическом дизайне сложно точно воспроизвести градиенты и тени
4.Платформа для создания сайта … на данный момент проходит тестирование
5.Карта скроллинга – это дополнительный инструмент …
Яндекс.Метрики, позволяющий делать видеозапись действий последних 1000 визитов
Google Analytics, позволяющий делать видеозапись действий последних 1000 визитов
Яндекс.Метрики, показывающий, как видят ваш сайт посетители при различных размерах экрана дисплея
Google Analytic, показывающий, как видят ваш сайт посетители при различных размерах экрана дисплея
6. Для установки MODX необходимо открыть ссылку …
«ваш новый сайт»/setup
«ваш новый сайт»/manager
7. Неверно, что для такого свойства CSS, как transition, …
характерным является исполнение браузером анимации с помощью собственного графического движка
характерен простой синтаксис
характерной чертой является легкость смешивания
характерно то, что его легко тестировать в Инструментах разработчиков
8. Для создания сайта на платформе MODX необходимо …
зарегистрироваться на сервере
создать базу данных
скопировать дистибутив на сервер
открыть ссылку установки
9. Запись в домене типа «А» содержит …
указатель на DNS-сервер
настройку почтовых служб
соответствие между доменом и IP-адресом сервера
10. Начинающему предпринимателю для создания одного небольшого сайта будет наиболее выгодна платформа …
11. Система Управления Базами Данных – это …
12. Порядок подключения библиотек в SEO: …
CSS и скрипты в начале
CSS и скрипты в конце
CSS в начале, скрипты в конце
CSS в конце, скрипты в начале
13. CMS (Content Management System) …
позволяет управлять содержимым
позволяет привлекать к работе с сайтом сотрудников средней квалификации
дает централизованный контроль над всеми страницами сайта
позволяет подбирать персонал в штат
14. В профессиональном создании сайта минимально цена складывается из нескольких составляющих, таких как цена работы …
серверного системного администратора
15. SQL-инъекцию используют для …
извлечения пароля админа
прямого манипулирования БД
подброса на сервер исполняемых файлов
система управления содержимым
язык описания визуальных стилей
язык разметки, описывающий структуру сайта
программный код для сайта
17. К преимуществам программируемого дизайна можно отнести …
то, что он легко переносится в CSS-свойства
возможность импортировать его как SVG
полную свободу дизайнера
18. Для такого свойства CSS, как Keyframe Animations, …
характерным является исполнение браузером анимации с помощью собственного графического движка
характерен более детальный контроль анимации
характерной чертой является легкость смешивания: одно свойство может анимировать цвет, прозрачность, размер и т.д.
характерны дополнительные параметры анимации (бесконечная, альтернативная)
19. Хостинг – это …
адрес сайта или определенная зона, которая имеет свое имя, не похожее ни на одно другое в системе имен
услуга предоставления настроенного сервера (там, где вы храните файлы своего сайта), который подключен к сети Интернет, и его обслуживание
совокупность доменных имён определённого уровня
адрес сетевого соединения, который идентифицирует владельца адреса
20. К недостаткам платного тарифа WIX можно отнести …
плохо читаемое доменное имя и чужую рекламу на сайте
ограниченный объем места для файлов (не более 500 Мб)
то, что нет возможности подключить Яндекс.Метрику и другие счётчики кроме Google Analytics
то, что нет возможности модифицировать программную часть сервера (связки CRM, рассылки, и т.д.)
21. В ряду инструментов, которые включает счетчик яндекс.метрика, можно назвать.
карту путей по сайту
22. Вебвизор – это …
дополнительный инструмент Яндекс.Метрики, позволяющий записывать видеозапись действий последних 1000 визитов
дополнительный инструмент Google Analytics, позволяющий записывать видеозапись действий последних 1000 визитов
дополнительный инструмент Яндекс.Метрики, показывающий, как видят ваш сайт посетители при различных размерах экрана дисплея
отдельный вид счетчика в социальных сетях
23.Если из 1 000 привлеченных посетителей 50 стали вашими клиентами, то конверсия составляет…
24.К способам кэширования следует отнести…
плагин microcache в MODX
опции Compress-Js и compress_css в MODX
плагин microcache в настройках веб-сервера
опции Compress_Js и compress_css в настройках веб-сервера
25.Счетчик Google Analytics характеризует .
то, что в нем делается упор на сбор максимального спектра данных
то, что он интегрируется со многими автоматическими сервисами, а также работает в мобильных приложениях
отличное визуальное оформление, удобное для людей
наличие полезных служб: вебвизора, тепловой карты, карты путей по сайту
26.К плюсам виртуального выделенного сервера VDS можно отнести .
то, что поддержка входит в стоимость услуг хостинга
большое количество ресурсов
наличие администраторских прав
27.Неверно, что техническое задание включает …
состав и содержание работ по созданию системы
характеристику объекта автоматизации
требования к системе
Размер файла: 63 Кбайт
Фаил: (.doc)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.
Плавные трансформации на чистом CSS. Свойство transition
CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.
Свойство в общем виде записывается так:
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
Анимация фона при наведении курсора
�� Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.
В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.
p < width: 100px; height: 100px; transition: width 2s, height 4s; >p:hover
Изменение размера элемента при наведении курсора
Анимировать изменение цвета текста при наведении на ссылку.
a < color: blue; transition: color 0.3s ease-in-out; >a:hover
Изменение цвета ссылки при наведении курсора
Изменение размера шрифта при наведении на текст:
p < font-size: 16px; transition: font-size 0.5s ease; >p:hover
Изменение размера шрифта при наведении курсора
Нюансы
☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:
- Цветовые свойства: color , background-color , border-color и другие.
- Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
- Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
- Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
- Свойство прозрачности: opacity .
- Свойства границы: border-width , border-radius .
- Свойство позиционирования: position .
❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.
Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.
Если вам нужна более сложная анимация или нужно анимировать изменение свойств, которые не поддерживают переходы, вы можете использовать CSS-анимации с помощью свойств @keyframes и animation .
Поддержка браузерами
Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.
Материалы по теме
- Тренажёры по CSS-анимациям от HTML Academy.
- : hover, : focus, : active — как работают состояния элементов.
- Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью 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 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 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
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>);При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023