# .topic-body 배경색이 지연되어 로드됩니다

**URL:** <https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862>\
**Category:** Product Support\
**Tags:** css\
**Created:** [7월 14, 2022, 10:52오전 UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862 "2022-07-14T10:52:02Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [7월 14, 2022, 11:27오전 UTC](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862/2 "2022-07-14T11:27:18Z")

</div>

안녕하세요, `keyframes`를 오버라이드하거나 새로운 것을 만들어야 합니다.  
아래와 같이 하면 애니메이션 전환 색상을 변경할 수 있습니다.

기본 keyframe은 다음과 같습니다: 🔽

```scss
@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: transparent;
  }
}

```

이는 `var(--tertiary-low)`에서 `transparent`로 하이라이트가 된다는 뜻입니다. Discourse의 기본 배경색이 흰색이고 토픽 본문에는 배경색이 없으므로 투명색은 흰색으로 보이기 때문에 좋습니다. 하지만 당신의 상황에서는 배경색이 다르므로, 먼저 투명색으로 변한 후 약간의 지연이 지나서야 `#fff` \*(topic-body에 설정한 배경색)\*가 됩니다.

* * *

따라서 부드러운 색상 전환을 위해 transparent를 변경해야 합니다. 기본값을 오버라이드할 수도 있지만, 새로운 keyframes를 만드는 것이 더 나은 방법일 수 있습니다.

> 참고: 기본 keyframe을 오버라이드하면 topic-body뿐만 아니라 Discourse가 해당 keyframe을 사용하는 모든 곳에서 변경됩니다. 🔽

다음은 기본 keyframes를 오버라이드하는 코드입니다.

```scss
@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

```

* * *

새로운 keyframes를 만들고 싶다면 🔽

```scss
// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

```

그리고 이 keyframe을 토픽 본문에 추가합니다.

```scss
.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

```

* * *

**전체 코드는 다음과 같습니다.** 🔽

```scss
body {
  background-color: #F5F5F5;
}

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

```

* * *

**변경 전**

**변경 후**

---

_[View the full topic](https://meta.discourse.org/t/topic-body-background-color-loads-after-a-delay/232862)._