Переходы CSS3 хотят добавить цвет и угаснуть его

Я хочу сделать фон DIV (который не имеет цвета фона), затем кратковременно погаснет. теперь я использовал JS, чтобы добавить новый класс (который добавляет красный) в DIV в вопросе и CSS3, чтобы добавить ослабление к цвету фона. но он облегчает его IN, я хочу, чтобы это было КРАСНО, а затем отключилось. Думаю, я мог бы сделать это, используя JS для добавления нескольких CLASS после задержки. но можно ли использовать CSS3 для этого полностью?

Ответ 1

Если вы хотите что-то вроде выделения, вы можете использовать анимацию CSS3. Они не поддерживаются в старых браузерах. Проверьте caniuse.

Я создал здесь короткий пример .

Выделение называется нажатием на ссылку. Вот CSS (без префиксов поставщика):

@keyframes highlight {
  0% {
    background: red
  }
  100% {
    background: none;
  }
}

#highlight:target {
  animation: highlight 1s;
}

Ответ 2

Один из способов сделать это - использовать метод анимации jQuery UI, который расширяет "нормальный" jQuery animate(), чтобы воздействовать на такие вещи, как background-color.

Переходы, подобные этому, возможны в css3, но, очевидно, с не такой широкой поддержкой браузера.

#maDiv {
   -webkit-transition:background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   height: 20px;
   width: 20px;
   background:#000;
}

#maDiv:hover {
    background: #ff0;
}

Это приведет к угасанию цвета, когда пользователь наведет Div и увянет его, когда мышь выключена, более 0,5 секунды. Подробные сведения о поддержке браузера см. Здесь: "css3 transition" здесь: http://www.html5rocks.com/en/features/presentation