CSS 테두리 애니메이션

CSS에서 테두리에 애니메이션을 적용하는 여러 가지 방법 살펴보기

Bramus

테두리 설정

요소에 테두리를 설정하는 데 사용할 수 있는 몇 가지 메서드(border, outline, box-shadow)가 있습니다. 스테파니 에클스의 요소 테두리를 추가하는 3가지 CSS 방법에 자세히 설명된 대로, 각 접근 방식에는 특히 테두리 애니메이션과 관련하여 고유한 장단점이 있습니다. 적절한 CSS border를 사용하지 않는 주된 이유는 애니메이션 때문입니다.

outline-offset를 사용한 테두리 애니메이션, Kevin J. 파월

최근에 눈길을 사로잡은 기사는 Fantastic CSS 테두리 애니메이션입니다. 이 기사에서는 저자 코코가 더 많은 옵션을 탐색했습니다. ::before 및 ::after를 사용하여 생성된 콘텐츠를 삽입하면 가짜 테두리가 생성되고 이 테두리에 애니메이션이 적용됩니다.

제가 가장 눈에 띄는 것은 이 기사에 사용된 지원되는 애니메이션 시각화입니다. 원하는 효과를 달성하기 위해 정확히 무엇을 하고 있는지 설명하는 데 큰 도움이 됩니다.

Coco에서 생성한 콘텐츠를 사용한 테두리 애니메이션

흰색 레이어와 색상 라인은 모두 생성된 콘텐츠입니다. 흰색 레이어를 페이드 인/아웃하면 레이어가 어떻게 쌓이는지, 애니메이션이 어떻게 작동하는지 명확하게 알 수 있습니다.

상자 모델 유지

생성된 콘텐츠를 사용하여 테두리를 모방하는 단점은 손상된 상자 모델이 생성된다는 것입니다. 이제 '테두리'가 아래에 그려지므로 콘텐츠가 가짜 테두리를 가릴 수 있습니다. 이를 완화하려면 원하는 border-width를 padding로 적용해야 합니다.

실제 테두리를 만들어 상자 모델의 작동을 유지하려면 여러 배경을 사용하고 테두리 영역으로 늘리면 됩니다.

기본 사항

먼저 점선 테두리를 만들고 여러 배경을 추가해 보겠습니다.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

background-origin로 배경 크기 조정

배경에 이상한 점이 있습니다. 배경이 테두리에 그려지지만 conic-gradient가 모두 잘못된 것 같습니다. 이는 의도된 동작입니다. 기본적으로 배경 이미지의 출처는 요소의 padding-box이므로 배경 이미지는 테두리에 그려지지 않습니다. 결국 테두리를 만들기 위해 설정된 배경 이미지가 테두리 자체에서도 반복되면서 이상한 시각 효과가 나타납니다.

이 문제를 해결하려면 배경도 테두리 크기를 차지하도록 확장해야 합니다. 백그라운드를 늘리고 다시 배치하여 수동으로 할 수도 있지만 background-origin 속성을 사용하여 border-box에 맞게 백그라운드 크기를 조절하는 것이 가장 좋습니다.

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

소스

금지사항
/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);
권장사항
background-origin: border-box;

다음과 같이 하나만 추가하면 훨씬 더 나아집니다.

background-clip를 사용하여 흰색 배경 레이어 축소

이제 배경이 모든 공간을 차지하므로 반투명 레이어를 다시 축소해야 합니다. background-size를 다시 조작하는 대신 더 쉬운 방법이 있습니다. background-clip를 사용하고 padding-box로 설정합니다. 이렇게 하면 배경이 더 이상 테두리 영역 아래에 그려지지 않습니다.

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

소스

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

마지막으로 테두리를 transparent로 만들어 효과를 극대화합니다.

border: 0.3rem dotted transparent;

애니메이션

테두리 애니메이션을 복원하려면 conic-gradient의 시작 각도를 조작하면 됩니다.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

@property 덕분에 이를 지원하는 브라우저에서는 간편하게 처리할 수 있습니다.

브라우저 지원

  • Chrome: 85
  • Edge: 85.
  • Firefox: 128.
  • Safari 16.4.

소스

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

모두 합치면 코드는 다음과 같습니다.

보너스 콘텐츠: border-image

그라데이션 테두리를 그리는 이전에 다룬 접근 방식은 CSS border-image를 사용하는 것입니다.

브라우저 지원

  • Chrome: 16.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

소스

겹치는 배경을 처리할 필요가 없으므로 코드를 더 간소화할 수 있습니다. 애니메이션은 이전과 같은 방식으로 적용할 수 있습니다.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

하지만 이 접근 방식에서는 더 이상 작동하지 않는 몇 가지 사항이 있습니다.

  • border-image는 border-radius를 따르지 않으며 항상 직사각형으로 유지됩니다.
  • border-image-slice를 fill로 설정하면 border-image가 set background 아래가 아닌 위에 그려집니다. 배경을 반투명하게 하려면 문제가 될 수 있습니다.

맺음말

CSS에서 테두리에 애니메이션을 적용하는 방법에는 여러 가지가 있습니다. 사용 사례에 따라 둘 중 하나를 선택할 수 있습니다.