как отложить переход цвета фона с помощью CSS

Question

как отложить переход цвета фона с помощью CSS

0

Эй, я новичок в разработке, поэтому пытался изменить цвет фона, когда мы меняем элемент меню, я это сделал, но хочу немного задержать изменение цвета фона. Я попробовал свойство перехода, но не получил результата. Свойство перехода не применимо to <body>? Как я пытался предоставить 'id' для <body> и применять правило, подобное этому

<body id="color">

CSS

#color {
    background-color: yellowgreen;
    transition: background-color 2s ;
}

Я делаю что-то неправильно? Каким образом можно применить <div> к полной странице и применить одно и то же правило?

user3601687 04 май 2014, в 18:53

Источник

Теги:

html

css

css3

3 ответа

Ещё вопросы

Jonco98 · Answer 1 · 2014-05-04T15-40-00.000Z

0

Mabye Это поможет

Это постоянно меняет цвет фона.

Jonco98 04 май 2014, в 15:40

0

Попробуйте добавить некоторый код вместо прямых ссылок или сэкономьте свое драгоценное время, чтобы объяснить, что вы действительно поняли из ссылки, и объяснить это. Ссылка, которую вы указали, удалена.
Mohammed Wahed Khan 26 окт. 2018, в 06:48

Justin Licata · Answer 2 · 2014-05-04T14-30-00.000Z

Во-первых, при использовании переходов вам нужно добавить -webkit для Safari - http://www.w3schools.com/cssref/css3_pr_transition.asp

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

#color {
  background-color: yellowgreen;
  -webkit-transition: background-color 2s ease-in; /* Safari */
          transition: background-color 2s ease-in;
  -webkit-transition-delay: 2s; /* Safari */
          transition-delay: 2s;

Вот список некоторых функций времени, которые вы можете использовать для переходов - http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

Вот сценарий, показывающий вам, как переход на border-color занимает .5 секунды, чтобы начать с наведения.

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

G-Cyr · Answer 3 · 2014-05-04T14-14-00.000Z

Это будет работать только один раз, когда загружается CSS, если этот идентификатор перезаписывает предыдущие или стандартные правила. Возможно, вы даже этого не заметили.

Когда CSS загружен, он остается в ваших браузерах, и больше ничего не произойдет.

Вы можете попытаться связать ваш файл CSS с меткой времени, чтобы принудительно обновлять CSS каждый раз, когда вы перезагружаете страницу. вроде как /myCssFile.css&id=010012014

Собственно, хорошей практикой было бы добавить класс в onload событие и установить transition или animation оттуда.

CSS на самом деле не предназначен для этого.

Вот тест, который я сделал некоторое время назад: http://codepen.io/gcyrillus/pen/rmhAp. Вы можете увидеть анимацию в первый раз, когда ваш браузер ее загрузит.

Спасибо за ответ, но, поскольку я новичок, не могу понять, что вы говорите. Ты имеешь в виду, что я должен применить это через jQuery? Понял немного, что ты сказал, но не получил решение