Плавная трансформация | CSS свойство transition
Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.
при наведении мышки
.blok < background: #808991; color: #FFF; cursor: pointer; >.blok:hoverпри наведении мышки
Благодаря свойству transition (w3.org) можно сделать плавный переход между состояниями элемента.
плавная смена цвета туда-обратно
.transitionплавная смена цвета туда-обратно
плавная смена при наведении на div
.transition2:hoverплавная смена при наведении на div
плавная смена, когда курсор выведен за пределы div
.transition3:not(:hover)плавная смена, когда курсор выведен за пределы div
сохранение положения :hover
.transition4 < transition: 0s 9999999s; >.transition4:hoverсохранение положения :hover
- all — все
- none — никто
width, background
cubic-bezier(.1, .9, .9, 1.5)
cubic-bezier(.1, .9, .9, .1)
cubic-bezier(.1, .9, .9, -1.5)
cubic-bezier(.1, -1.5, .1, 2.5)
steps(4, end)
steps(4, start)
плавная смена цвета CSS
плавная смена цвета CSS
Популярные сочетания transition с другими свойствами, например, opacity или transform
изменение ширины width
изменение ширины width
изменение прозрачности opacity
кручение CSS
увеличивавшие объекта CSS
смещение вниз CSS
div.blok6 < cursor: pointer; position: relative; text-align: center; >div.blok6:before < background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; box-shadow: 0 0 10px #A0A9B1 inset; content: attr(data-title); font-family: Tahoma; font-size: 32px; height: 48px; line-height: 48px; opacity: 0; padding: 0 10px; position: absolute; right: 50px; top: 20px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; >div.blok6:hover:before < right: 160px; opacity: 1; top: 140px; >div.blok6 img < width: 400px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; >div.blok6:hover img < width: 500px; >div.blok6:after
100 комментариев:
Наташа, спасибо.
Применил кручение на картинки. NMitra Пожалуйста! Приятно, что записи имеют применение. Анонимный Наташа, БОЛЬШОЕ Вам спасибо. Отличный блог, многое искал и нашел как раз в вашем блоге. Что больше всего радует- это написание статей понятным языком. NMitra Такие слова очень радуют слух и мотивируют на новые статьи! Космо Мизраил Горыныч А вы случаем не встречались с Даной Домирани? О_О Тоже великая дизайнерша!) NMitra Спасибо за комплимент 🙂 Только до «великой» мне ещё далековато.
К сожалению, не встречалась. Космо Мизраил Горыныч ну почему же — вполне великая 😉
только вот последний пример дёргается как контуженый XD
очень порадовало свойство transform >_< не думал, что эти св-ва вместе так применять можно! ^_^ NMitra М-да. Выпивающие, да ещё и контуженные снеговики :) По-хорошему нужно применять либо увеличение картинки, либо выплывающий текст. Из-за того, что мышка попадает то на изображение, то на область текста и получается не очень хорошо.
Никак не соберусь написать статью про transform. Космо Мизраил Горыныч NMitra, попробуйте со снеговиками так: пусть будет div, и в классах что-то типа: div.block6:hover img < . >div.block6:hover img:after < . >NMitra Супер! Вы правы, спасибо! Сама же написала только статью — http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. 🙂 Космо Мизраил Горыныч да, вижу >_< ток если увести мышь, снеговики не будут плавно возвращать свой размер.
Аааааа, я понял, где мы лоханулись.
Вот смотрите тут:
div.blok6:hover img width: 500px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
>
Все транзишн нужно перенести в
div.blok6 img width: 400px;
>
Тогда они не будут контузиться 🙂 Космо Мизраил Горыныч Чёт я вас почитываю-почитываю, и мне приспичило вдруг создать свой блог!))))
Ссылко внизу будет 🙂
Тематика почти такая же, может быть, найдём друг у друга что-нибудь интересное 😉
Мож потом баннерами обменяемся?) NMitra Вот теперь красиво! Уважаю за такое внимание к деталям и желание «допилить» до идеала.
На самом деле мне приятно, что получается у читателей находить творческую нотку. Обращайся, помогу, чем смогу.
И, конечно, интересно взглянуть на ссылку 😉 Космо Мизраил Горыныч я на своём блоге попробую «проапгрейдить» снеговиков, так как мне тоже нужен этот эффект для моей галереи >_< результаты будут - дам ссылко :)
ну а вообще я цсс знаю практически вдоль и поперёк, только вот фантазии периодически не хватает 🙂
А вы Ява-Скрипт хоть немного знаете. NMitra Да, с фантазией у меня тоже туго, благо читатели всё время удивляют.
Очень немного и поверхностно. Ээээ. Из скрипта могу удалить ненужные фрагменты, тем самым настроив его под себя. С событием onclick недавно познакомилась.
Всё начинается с просьбы в комментарии и я лезу в дебри. А когда туда часто ходишь, дебри не кажутся такими уж ужасными.
Посмотри, плиз, выплывающую панель вместо футера — http://prilozhenie13.blogspot.com/. Она фиксированная. Вот здесь код — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. Где-то с версткой намудрила, возможно с float: _left.
В Firefox нормально, в Хроме кнопка «последние» (в CSS #footer-dva) «плывёт». Добавляю position: absolute, ситуация меняется, теперь в Firefox наблюдается кривобразие. В IE гаджеты друг под другом.
Пока идеи отсутствуют. Космо Мизраил Горыныч ну я тоже в ява-скрипте ни бум-бум)))))
посмотрел ваш код.
короче, я в коде окончательно запутался %.% и сотворил свою панель. конструкция гораздо проще, эффект тот же самый 🙂
Этот казёл не даёт хтмл публиковать, видимо, создал на домашнем форуме для вас страничку: http://city.first-forum.com/h10-page
ну вы через огненную козявку код скопируете 🙂 NMitra В понедельник посмотрю, сейчас день семьи ))) NMitra Сделала, зацени — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. VivaL Здравствуйте, спасибо за сайт, много полезной информации.
Вот такой вопрос у меня: можно ли сделать, чтобы эффект-«увеличивавшие объекта в два раза transform: scale(2)» запускался от клика мышкой.
Если можно, то в какую сторону копать?
Спасибо. NMitra Не ставила перед собой данной задачи. Я бы смотрела в сторону getElementById(»).style. Но сомневаюсь, браузеры используют префикс.
Или сделала что-то вроде
Или :target — http://shpargalkablog.ru/2012/02/psevdoklassy-css.html
Для картинок http://shpargalkablog.ru/2011/05/kak-uvelichit-izobrazhenie.html phenom Каким образом можно сделать задержку что бы рамка появлялась на элементе не мгновенно как сейчас,а через секунду например.Спасибо.
.td_men:hover,.catalog_men:hover
border-left:3px solid #f7941f;
border-top:3px solid #f7941f;
border-right:3px solid #f7941f;
border-bottom:3px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
z-index:999999;
>
.td_men,.catalog_men
border-left:3px solid white;
border-top:3px solid white;
border-right:3px solid white;
border-bottom:0px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
> NMitra .td_men:hover,.catalog_men:hover
-moz-transition: all 1s 1s; -webkit-transition: all 1s 1s; -o-transition: all 1s 1s;
> Анонимный Все никак не мог найти время на изучение transition&transform, а ларчик-то просто открывался. Спасибо за доступную статью 🙂 NMitra Пожалуйста, приходите ещё 🙂 Андрей Столько интересного и в одном месте ))
Хочется применить подобные фишки для своих сайтов, только банер сделать, чтоб не через IE заходили. NMitra Пусть заходят, эффекта постепенного изменения они не увидят, но всё будет функционировать как при :hover Den А как быть, если у блока не сплошной цвет, а градиент и его надо плавно перевести в другие цвета градиента? NMitra Увы, не все свойства реализуются (см. http://dev.w3.org/csswg/css3-transitions/#properties-from-css- ) Анонимный Спасибо большое. NMitra Рада помочь! Сергей Хамзин Постоянно стараюсь не использовать яваскрипты на страницах своих сайтов и постоянно убеждаюсь что и на css можно реализовать много интересных вещей.
Автор вы лучший сколько разбираюсь с css ни где ещё не видел такого подробного описания с нормальными понятными примерами
5 балов NMitra Спасибо, Сергей! Приятно осознавать, что твои труды оценены! купить кулер вот отличненько! спасибо! сейчас наведу красоту у себя ))) Анонимный Отличная статья, спасибо! NMitra Рада быть полезной! Сергей Хамзин Уважаемые подскажите что делать с IE 6-7-8 они сильно туповатые и всё режут на корню все усилия и старания
уже даже на костыль согласен из яваскрипта, если кто имеет опыт поделитесь кому не жалко. NMitra Посмотрите тут http://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie Анонимный Добрый.
Подскажите плз, как связать transition с height:auto ?
по существу оно работает, разворачивает на высоту элемента, но без замедления, как буд-то 0s стоит время. NMitra Добрый! Ничего не получиться, таковы условия w3.org http://dev.w3.org/csswg/css-transitions/#properties-from-css-
Нужно, чтобы оба значения были указаны или в процентах или в величинах, например px. Есть ещё calc. Анонимный Спасибо большое за ответ!
В процентах таже картина, разворачивается, но без задержки.
А не подскажите может какойнить другой способ?
Нужно, чтоб при длинном тексте, часть теста скрывалась (видимая часть должна быть одинаковой), а при наведении курсора раскрывалась, но только на размер элемента (текста)
Спасибо. NMitra Смотрите в сторону позиционирования. Вам нужно показать поверх всего содержания текст или чтобы развёрнутый текст сдвигал остальной контент? Анонимный Пока сдвигает контент, но я не против, смотрится нормально, хочется пока чтоб показывало (разворачивало) только по размеру текста NMitra Ваш вопрос поняла, подумаю до конца недели, может завтра что и напридумаю. Анонимный Буду премного благодарен.
Спасибо за отзывчивость. NMitra Посмотрела, подумала. Разворачиваться плавно не будет. Можно другой какой-нибудь эффект или задать фиксированное значение или JavaScript
#blok opacity: .5;
transition: 1s;
height:30px;
>
#blok:hover opacity: 1;
height:auto;
> Анонимный Спасибо за попытку 🙁
фикисированную и оставлю пока, раз все так сложно.
А по поводу других эффектов, какие есть варианты?
. хотя, думаю самый оптимальный и симпотичный вариант это разворачивание.
Спасибо! Виталий Вот кстати сам ресурс:
http://shopping.mk.ua/catalog/grupa/69
. эт по поводу разворачивания. оцените, нормально? Виталий Чуток ошибся, вот:
http://shopping.mk.ua/catalog/grupa/69 NMitra Нормально, как добились?
Хотя на мой взгляд абсолютно бессмысленная информация. Для меня как покупателя это просто набор цифр и букв. Особенно когда идёт полное повторение заголовка-ссылки. Виталий Добился как и было :), как и договаривались, постоянная высота блока, на высоту текста не получается 🙁
Повторение заголовков лишнее, попадается редко (долго редактировать), ну или когда нет описания, а так там обычно краткие характеристики, вроде так проще ориентироваться в отличиях. Анонимный Сергей.
Спасибо!, статья очень помогла!.
NMitra Пожалуйста, Сергей. Eduard Korotchuk Отличный материал. NMitra Благодарю 161leeroy а как сделать,чтоб цвет менялся два раза?например когда наводишь на ссылку,то она сначала загорается одним цветом ,а потом другим NMitra http://shpargalkablog.ru/2012/03/animaciya-css.html
Adilet Melisov Спасибо классная статья! Спасибо за труд и ваше время! если еще будут статьи готов с радостью прочитать и научиться ))) NMitra Добро пожаловать! seoronin Наталья, отличная подборка примеров! Только у тебя нашел, как высоту div’а сделать плавной 🙂 NMitra Высота блока не должна быть указана в процентах. Пример:
Частично решает проблему max-height. Анонимный Сайт просто шикарный! Все что нужно, мне полезное, нашел здесь! NMitra Благодарю за отзыв! Богдан Казан Полезная статья для новичков) Анонимный Спасибо Вам большое. На Вашем сайте, всегда столько интересного и с примерами интересными и всё подробно рассказано. Действительно, БОЛЬШОЕ ВАМ спасибо. NMitra Благодарю! Очень радостно для меня было читать ваши слова! Анонимный Здравствуйте!
У меня вопросик.
Вот игрался, экспериментировал. И получилось. Что эффект. Смещение вниз. Вниз и наверх. Всё прекрасно. А вот в право и лево не едет, а перескакивает. Не подскажите почему. И можно ли сделать по диагонали. Например, из угла вытащить на середину.
А сайт Ваш просто замечательная находка для меня. Столько интересного и всё в одном месте. Спасибо Вам большое!
NMitra Здравствуйте, нужно начальное положение (top: 0; left:0;) и конечное (top: 50px; left: 50px;) http://jsfiddle.net/NMitra/d5jcmhxe/ Анонимный Извините за беспокойство. Всё нарыл, всё додумал. Добавил к top: 0; right:0; или left:0; И hovere right:сколько хочу; или left: сколько хочу;
И всё поехало. Только да в ИЕ не хочет, будем думать.
Спасибо Вам за такой хороший сайт. С его помощью становлюсь умнее. Спасибо.
Анонимный Во, пока я строчил и Вы ответили. Спасибо Вам большое. Анонимный Бомбочка, пацаны! Анонимный Здравствуйте!
Скажите пожалуйста как в примере с увеличением ДИВа как у Вас здесь в 2 раза.
Как сделать что бы увеличивался толь в одну сторону. Например в право.
Или чтобы. С верху в низ то есть по высоте.
NMitra Здравствуйте, так?
transform: scale(2,1); Анонимный Спасибо Вам за ответ. Так тоже забавно и интересно, пригодится. Спасибо.
Но я хотел бы. Что бы например с права на лево. И правый край оставался на месте а двигался лишь левый край.
NMitra .transition-scale position: relative;
left: 0;
z-index: 2;
background: #808991;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 20px;
border: 4px ridge black;
cursor: pointer;
transition: 3s linear;
>
.transition-scale:hover transform: scale(2,1);
left: 262px;
> Анонимный Супер СПАСИБО Вам.
А это Вам забавная штучка. Посмотрите. Как обещал, нарою поделюсь. Спасибо.
P.S.
Блин, какая у Вас капча трудная. Еле можно пролезть .
Анонимный Забыл добавить. Штучку.
http://codepen.io/rileyjshaw/pen/LIwdc
NMitra Забавная штучка 🙂
От Гугла, прорываются только самые настойчивые 🙂 Без капчи, спама стало много. Анонимный Ой простите зашёл с не перезагруженной странице и вижу нету. Думал опять что не так сделал.
Извините.
Спам да. Но у Вас зверская.
Спасибо Вам ещё раз.
Андрей Фролов Добрый день.
Спасибо за вашу статью, очень интересна.
Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении. NMitra Добрый день, можно с помощью анимации http://shpargalkablog.ru/2012/03/animaciya-css.html
Пример: http://shpargalkablog.ru/2013/06/popup.html Андрей Фролов Спасибо большое. буду изучать. va0816 некоторые простые анимации можно сделать без animation
Например можно сделать такую неоновую рамку: http://jsfiddle.net/x8v6wvt5/ NMitra setInterval — это и есть анимация, только в JavaScript. Или я не поняла вас? Анонимный А как сделать что бы фон менялся плавно туда сюда у дива без ховера? NMitra С помощью animation
Как здесь http://shpargalkablog.ru/2013/12/blink-text.html только с фоном
Подробнее http://shpargalkablog.ru/2012/03/animaciya-css.html Анонимный Да, но где выставлять стартовый фон, а где финальный? Просто если поставить диву какой либо бэкграунд в стилях, он патом не меняется Анонимный А все понял, вместо колор нужно прописать background) NMitra «патом» неправильно писать, нужно «потом».
Извините за замечание, аж глаз режет. Анонимный хорошо, сам не заметил) Анонимный А подскажите пожалуйста, возможно ли совместить две анимации, первая — это когда меняется фон у круга, скажем два-три раза, а затем идет от него box-shadow (похоже как разводы на воде от упавшего в нее камня), причем когда начинается эффект box-shadow фон в круге уже не меняется и затем анимация начинается заново, такое возможно? может есть какие то команды дополнительные что бы регулировать анимацию, был бы очень признателен за совет. Вот пример двух анимаций, о возможности совмещения которых я говорю:
#uptocall border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
#uptocall border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
#uptocall animation: uptocall 1.5s linear 3 forwards, uptocall1 1.5s 4.5s linear infinite;
> NMitra Или так http://jsfiddle.net/NMitra/07Lqsvrk/1/ ?
#uptocall animation: 10s linear infinite;
animation-name: uptocall, uptocall1;
> Neon Rain Скажите, а как здесь выставить, что бы это все патом повторялось и делается ли бордер небольшой в тенях на конце разводов второй анимации, т.е. вся тень одного тона светлого более длинная, но на конце бордер скажем 1px ? Если Вам не трудно и это подсказать) Такие эффекты я в ЦСС не использовал так широко, трудно еще по началу без хороших советов, но разобраться необходимо.
Easing Functions – функции плавности для CSS-анимации и переходов
Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.
Замечали, как плавно и приятно смотрится анимация в хорошем профессиональном проекте? Интересный пример – веб-сайт In Pieces, где анимация используется не только для украшения, но и убедительно передает информацию об исчезающих видах. Не только сам дизайн и стиль анимации радует глаз, но также изящные переходы и движения. Их плавность в сочетании с дизайном и подачей, делает анимацию потрясающе естественной. В этом сила функций плавности, также называемых временными функциями (прим. ред. В статье автор использует оба названия).
При написании свойств перехода и анимации в CSS мы обычно используем заранее определенные функции плавности: ease , ease-out и подобные им. Они хорошо смотрятся и работают в большинстве случаев. Однако наличие на странице дюжины или более анимированных элементов с одинаковой продолжительностью и значениями функций плавности может сделать пользовательский интерфейс несколько однообразным и монотонным. Люди лучше реагируют на естественное движение, поэтому более разнообразная и естественная анимация и переходы улучшат взаимодействие с пользователем.
Возвращаясь к примеру In Pieces, обратимся к таблице стилей. Можно заметить, что для достижения этой изящной анимации используются различные настраиваемые функции cubic-bezier в сочетании с предопределенными временными функциями linear и ease-in . Анимация не выглядела бы так хорошо, если бы вместо настраиваемых функций использовались только предопределенные. На следующем видео все функции плавности заменены на ease-out . Несмотря на то что в анимации нет ничего плохого, обратите внимание, что она не такая захватывающая, как исходная.
Теперь подробно рассмотрим функции плавности CSS, типы функций и способы создания пользовательских функций с использованием кубических кривых Безье.
Под капотом
Чтобы лучше понять функции плавности, следует сделать шаг назад и взглянуть на основы анимации в CSS.
Анимация определяется ключевыми кадрами, которые задают вид и расположение элемента в определенных точках. CSS-переходы используют два ключевых кадра (начальное и конечное значение), а CSS-анимация позволяет более точно управлять процессом с помощью правила @keyframes .
Продолжительность анимации определяет время от первого ключевого кадра до последнего. На следующем графике показана связь между ключевыми кадрами анимации и продолжительностью.
Есть много способов перехода анимации между двумя ключевыми кадрами. Например, анимация может иметь постоянную скорость, или она может быстро двигаться в начале и замедляться ближе к концу, или двигаться медленно в начале, а затем ускоряться, пока не достигнет конца, и т. д. Эта скорость определяется с помощью функций плавности (временных функций). Как видно на предыдущем графике, функция плавности представлена линией, соединяющей две точки. Мы видим линейную функцию (прямая линия), но переход между ключевыми кадрами может описываться и кривой.
Как видите, существует множество возможных вариантов функций плавности анимации. Рассмотрим их.
Типы функций плавности
В CSS можно использовать три основных типа функций плавности:
- Линейные функции ( linear )
- Кубические функции Безье (в т.ч. ease , ease-in , ease-out и ease-in-out )
- Ступенчатые функции ( steps )
Линейные функции
Мы рассмотрели линейные функции в одном из предыдущих примеров, поэтому просто подведем итог. Благодаря временным функциям, анимация проходит по ключевым кадрам с постоянной скоростью. Как вы, возможно, уже знаете, линейную временную функцию можно легко настроить в CSS с помощью linear .
Кубические функции Безье
Линейные временные функции подходят для определенных случаев, но если функция используется неправильно или слишком часто, тогда анимация будет выглядеть посредственно и неестественно. Как мы увидели на примере с In Pieces, пользователи лучше реагируют на естественное движение, а именно, на нелинейные временные функции, которые дают возможность к ускорению и замедлению.
Кривые Безье часто используются в векторной графике, анимации и робототехнике для более простого создания плавных кривых и траекторий. В CSS-анимации используется кривые Безье, построенные по четырем точкам, которые также известны как кубические кривые Безье.
Часто используемые предопределённые функции плавности, такие как ease , ease-in , ease-out и ease-in-out , относятся к кубическим функциям Безье. Они могут послужить в качестве быстрого способа установить нелинейную функцию плавности. С помощью cubic-bezier можно также описать и линейную функцию.
Функция Плавности
Значение cubic-bezier
Скорость в начале
Скорость в середине
Скорость в конц
cubic-bezier(0.0, 0.0, 1.0, 1.0)
Плавные трансформации на чистом 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 — как работают состояния элементов.
- Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Вот как это работает:
Что всё это значит
Первые два свойства просто немного меняют вид ссылки.
Свойство color: maroon; меняет цвет текста в тегах на темно-красный.
Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.
- 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
Как перекрыть один элемент другим. CSS-свойство z-index
z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .
Синтаксис
.my-element
- 10 июля 2023
Как верстать и оформлять цитаты
�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.
- 22 июня 2023
163. Как сделать плавный переход в CSS
Когда пользователь наводит курсор на объект или нажимает на него, псевдокласс hover срабатывает мгновенно. Чтобы как-то сгладить переход, необходимо использовать анимацию. Приведем простой пример ссылки:
.link padding: 10px 20px;
background: #F1F1F1;
color: #000;
>
.link:hover background: #AAAAAA;
> Теперь сгладим переход цвета фона при наведении курсора на ссылку. Для этого будем использовать три свойства: transition-property , transition-duration и transition-timing-function . Первое указывает на свойство, к которому мы применяем переход. Второе указывает продолжительность перехода. Третье указывает скорость перехода, в зависимости от времени.
.link:hover background: #AAAAAA;
transition-property: background;
transition-duration: 1s;
transition-timing-function: ease;
> В нашем примере устанавливается переход для свойства background , длительностью 1s и с временной функцией ease . Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на all , то есть таким образом: transition-property: all .
Теперь рассмотрим значения, которые может принимать свойство transition-timing-function . Достаточно тяжело описать работу каждого значения, поэтому просто их перечислю: ease , linear , ease-in , ease-out , ease-in-out и cubicbezier . Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:
.link:hover background: #AAAAAA;
transition: background 1s ease;
> Приведенные ранее примеры небыли кроссплатформенными. Чтобы свойство transition корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:
- -webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
- -o- для Opera;
- -moz- для Firefox;
- -ms- для браузеров Microsoft.
Используются они следующим способом:
-webkit-transition: background 1s ease;
-o-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease; Кстати, в свойстве transition можно перечислять значения через запятую, например, вот так:
transition: background 1s ease, color 2s linear; Возможно, кто-то задается вопросом, почему бы не использовать JavaScript? Использовать его можно, но зачем усложнять себе жизнь, когда имеется возможность решить задачу средствами CSS.