5

Как сделать так, чтобы сначала цвет поменялся на зеленый, а затем спустя такой же интервал стал синим, при этом не отводя курсора от блока. Заранее спасибо:)

#s {
  width: 20%;
  height: 10em;
  background: red;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: background 5s;
}

#s:hover {
  background: green;
  transition: background 5s;
}
<div id="s"></div>

4 ответа 4

6

Вам поможет @keyframes:

 #s{
   width: 20%;
   height: 10em;
   background: red;
 } 
 
 #s:hover{
   animation: bg 5s linear forwards;       
 }
 
 @keyframes bg {
  0% {background: red;}
  50% {background: green;}
  100% {background: blue;}
 }
<div id='s'></div>

3
  • Ну вот, ты первый))
    – Qwertiy
    17 дек 2019 в 12:03
  • @Qwertiy случайно зашел, пока проект пересобирается на дженкинсе =) 17 дек 2019 в 12:03
  • @Qwertiy, какая разница кто первый если ваши ответы неправильные? =) 17 дек 2019 в 12:16
6

div {
  width: 10em;
  height: 10em;
  background-color: red;
}

div:hover {
  animation: bg 5s linear forwards 1;
}

@keyframes bg {
    0% { background-color: red;   }
   50% { background-color: green; }
  100% { background-color: blue;  }
}
<div></div>

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    17 дек 2019 в 17:02
6

Вот решение при помощи transition и без доп элементов:

#s{
   width: 20%;
   height: 10em;
   background: linear-gradient(red -1000px, red 0, green 10000px, blue 20000px);
   transition: 5s;
   background-size: 100% 21000px;
 } 
 
#s:hover{
 background-position: 20% -20000px;
}
<div id='s'></div>

1
  • 2
    от таких споров и соревнований только польза, если она выливается только в код. (+) Спорьте ребята, спорьте! 17 дек 2019 в 13:42
4

Строго говоря ответы основанные на свойстве animation являются неверными - в вопросе ясно сказано что нужно использовать transition.

#s {
  width: 20%;
  height: 10em;
  background: red;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: background 5s;
}

#s:hover {
  background: green;
}

#d {
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background 5s 5s;
}

#d:hover {
  background: blue;
}
<div id="s">
  <div id="d"></div>
</div>

13
  • 2
    Вы забиваете гвозди шуруповёртом если Вас попросят? Даже если у Вас есть молоток? 17 дек 2019 в 12:19
  • 1
    @AndreyFedorov возможен и другой вариант, что ТС кроме transition ни о чём другом и не слышал или забыл. Вот ребята и подсказали ему своими ответами. Зеленая галочка косвенно подтверждает это :) 17 дек 2019 в 12:43
  • 2
    @Alexandr_TT, вероятно так и есть. Однако разве не интереснее решить вопрос с ограничениями, а не тиражировать очевидное решение? 17 дек 2019 в 12:57
  • 1
    @Согласен. Поэтому я вам поставил плюс 17 дек 2019 в 13:08
  • 1
    @StrangerintheQ, я там поправил немного. Проблема исчезла. 17 дек 2019 в 14:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.