Как задать свойству transition только к одному свойству, если таких свойств в коде несколько?

Question

В данном примере в коде CSS планируется сделать так, что при наведении на текст у него менялись цвет и тень. В коде CSS несколько раз встречаются свойства color(для текста) и text-shadow, из-за чего при открытии страницы видны:1) анимация смены цвета текста с черного(по умолчанию) на фиолетовый и 2)появление у текста тени. Подскажите, пожалуйста, как сделать так, чтобы свойство transition делало анимацию смены цвета текста и тени только в момент наведения на текст.

.text {
  margin: 330px auto;
}

.text h1 {
  text-align: center;
  font-size: 120px;
  font-family: "Pangolin", cursive;
  color: rgba(178, 5, 221, 0.856);
  transition-property: text-shadow, color;
  transition-duration: 0.24s;
  text-shadow: 4px 4px 1.6px rgb(78, 77, 77);
}

.text h1:hover {
  text-shadow: 2px 2.2px 1.3px rgb(78, 77, 77);
  color: #0ba4a6;
  cursor: pointer;
}

<div class="text">
  <h1>text</h1>
</div>

Answer 1

.text{
  display: flex;
  justify-content: center;
}
.text h1{
    font-size: 120px;
    font-family: "Pangolin", cursive;
    color:rgba(178, 5, 221, 0.856);
    transition-property: text-shadow, color;
    transition-duration: 0.24s;
     text-shadow: 4px 4px 1.6px rgb(78, 77, 77);
}
.text h1:hover{
    text-shadow: 2px 2.2px 1.3px rgb(78, 77, 77);
    color:#0ba4a6;
    cursor:pointer;
}

<div class="text">
        <h1>text</h1>
</div>

БЛОГ НА HUSL

Как задать свойству transition только к одному свойству, если таких свойств в коде несколько?

Ответы (1 шт):