CODEWITHSUNDEEP
css
Ole Kristian
Ole Kristian

Reputation: 43

How do I make my CSS transition only apply for one element?

I want to make the transition only apply to the hover effect where it changes the colors. The transition should not affect the border-radius change.

.FAQ-Question {
  transition: all 0.2s ease-in-out;
}

.FAQ-Active, .FAQ-Question:hover {
  color: rgb(127, 255, 159);
  background-color: rgb(0, 0, 120);
}

.FAQ-Active {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Upvotes: 1

Views: 1184

Answers (2)

AXOME
AXOME

Reputation: 176

You can use the CSS "transition-property" property to declare that only specific properties should be affected by the transition. Add

transition-property: background-color;

To your element to only animate the background color.

Upvotes: 1

Nitin
Nitin

Reputation: 378

You have added all as the value for transition property. Instead of "all" just specify the property name for which you want to apply the transition effect.

.FAQ-Question {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

CSS3 Transition - MDN Article

Upvotes: 5

Related Questions