Как сделать плавное изменение цвета css

Плавная трансформация | CSS свойство transition

Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.

Благодаря свойству transition (w3.org) можно сделать плавный переход между состояниями элемента.

  • all — все
  • none — никто
  • ease, он же cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear, он же cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in, он же cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out, он же cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out, он же cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start, он же steps(1, start)
  • step-end, он же steps(1, end) , он же steps(1)

Популярные сочетания transition с другими свойствами, например, opacity или transform

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(&#39;&#39;).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&#39;а сделать плавной 🙂 NMitra Высота блока не должна быть указана в процентах. Пример:

<style>
.transition-height <
background: #808991;
height: 30px;
transition: 3s linear;
>
.transition-height:hover <
height: 150px;
>
</style>

Частично решает проблему 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 ? Если Вам не трудно и это подсказать) Такие эффекты я в ЦСС не использовал так широко, трудно еще по началу без хороших советов, но разобраться необходимо.

Анимация CSS, плавное изменение цвета текста [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 2 года назад .

Нужно плавное изменение цвета текста, 5-6 цветов друг за другом. "Эффект гирлянды"

Я хочу продемонстрировать работу плагина на jquery : lettering.js который разбивает слово на буквы которыми можно манипулировать и так же манипулировать задержкой анимации

В сниппете stackoverflow я на прямую вставил этот весь lettering

Та же ситуация без использования этого плагина

Раз уж фамилия заканчивается на ян, так быть отвечу.

Что бы было понятно что вы пытались сами а не что за вас нужно писать, в следующий раз задавая вопрос показывайте свой код.

Как сделать плавное появление и постепенное исчезновение с JavaScript и CSS

У меня есть какой-то код, который исчезает, но когда я исчезаю, непрозрачность div остается на уровне 0.1 и не увеличивается.

Что я делаю не так и каков наилучший способ исчезать и исчезать из элемента?

11 ответов

Я хочу взять QTMovie, который у меня есть, и экспортировать его с замиранием звука и замиранием в течение заданного промежутка времени. Я хочу сделать это в течение Cocoa как можно больше. Скорее всего, в фильме будет только звук. Мои исследования выявили несколько возможностей: Используйте новые.

Я использую yui3 для создания эффекта fade-in/fade-out. Проблема в том, что я не могу найти способ сделать это с помощью класса (fadein — добавляет класс css, fadeout — удаляет класс). Я нахожу только примеры этого определения цвета фона и от него. Разве это не возможно с yui3? С jquery все так.

Вот более эффективный способ выцветания элемента:

вы можете сделать обратное для fade in

setInterval или setTimeout не должны получать строку в качестве аргумента

погуглите зло eval, чтобы узнать, почему

И вот более эффективный способ затухания в элементе.

зачем ты так с собой поступаешь?

Я думаю, это проще.

Вот моя попытка с анимацией Javascript и CSS3 Итак, HTML:

CSS3 с переходами:

Часть Javascript. Проверьте, существует ли className, если да, то добавьте класс и переходы.

Просто нажмите, и он будет исчезать и исчезать. Я бы рекомендовал использовать JQuery, как упоминал Итай Саги. Я пропустил Opera и MS, поэтому я бы рекомендовал использовать prefixr, чтобы добавить это в css. Это моя первая публикация на stackoverflow, но она должна работать нормально.

Мне было интересно, может ли кто-нибудь помочь мне сделать простое скрытие и исчезновение, когда пользователь наведет курсор на div item, текст (h1) Share This будет скрыт, а div будет показан. как только пользователь покинет элемент div, он автоматически скроет div social-btn и покажет h1. вот.

Я ищу плавное переключение ширины css div между значением и auto. В настоящее время у меня есть это, так как это второй лучший вариант, который я знаю, чтобы достичь почти того, что я хочу. Делая это, я надеюсь создать меню щелчка, которое будет таким же широким, как изображение и имя.

Ладно, я все продумал.

Следует использовать вместо

Потому что значение непрозрачности хранится в виде строки, а не в виде float. Я до сих пор не уверен, почему это дополнение сработало.

Обычно я использую эти служебные функции. element -это элемент HTML, а duration -желаемая длительность в миллисекундах.

Вот мой код для функций переключения fade in/out.

Это было из библиотеки стиля jQuery, которую я сделал. надеюсь, это поможет. ссылка на lib в cloud9: https://c9.io/christopherdumas/magik_wb

Мне нравится идея Ibu, но я думаю, что у меня есть лучшее решение, используя его идею.

Это решение использует дополнительное уравнение в отличие от решения Ibu, в котором использовалось мультипликативное уравнение. Способ его работы заключается в том, что в уравнении требуется приращение времени (t), приращение непрозрачности (o) и предел непрозрачности (l), который равен: (T = время затухания в миллисекундах) [T = (l/o)*t]. "20" представляет приращения времени или интервалы (t), ".01" представляет приращения непрозрачности (o), а 1 представляет предел непрозрачности (l). Когда вы вставляете числа в уравнение, вы получаете 2000 миллисекунд (или 2 секунды). Вот журнал консоли:

Обратите внимание, как непрозрачность следует за величиной приращения непрозрачности .01, как и в коде. Если вы используете код Ibu, сделанный,

вы получите эти цифры (или что-то подобное) в журнале консоли. Вот что у меня есть.

Обратите внимание, что нет никакой заметной закономерности. Если бы вы запустили код Ibu, вы бы никогда не узнали, как долго длилось затухание. Вам придется взять таймер и угадать и проверить 2 секунды. Тем не менее, код Ibu сделал довольно приятное затухание (вероятно, он работает для затухания. Я не знаю, потому что я еще не использовал fade out). Мой код также будет работать для затухания. Давайте просто скажем, что вам нужно было 2 секунды, чтобы исчезнуть. Вы можете сделать это с помощью моего кода. Вот как это будет выглядеть:

Все, что я сделал, это изменил непрозрачность на 1 (или полностью непрозрачную). Я изменил приращение непрозрачности на-.01, чтобы он стал невидимым. Наконец, я изменил предел непрозрачности на 0. Когда он достигнет предела непрозрачности, таймер остановится. То же, что и в предыдущем, за исключением того, что он использовал 1 вместо 0. Когда вы запускаете код, вот как должен выглядеть журнал консоли.

Как вы можете видеть, шаблон .01 все еще существует в fade out. Оба затухания плавны и точны. Я надеюсь, что эти коды помогли вам или дали вам представление об этой теме. Если у вас есть какие-либо дополнения или предложения, дайте мне знать. Спасибо, что нашли время посмотреть это!

Кажется, я понял, в чем проблема. :

Как только вы заставите div исчезнуть, вы не выйдете из функции : fadeout снова вызовет себя, даже если непрозрачность станет 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *