CSS 테두리 애니메이션

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

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

를 사용한 테두리 애니메이션: 케빈 J.outline-offset 파월

최근에 눈길을 사로잡은 도움말은 멋진 CSS 테두리 애니메이션으로, 저자인 Coco가 더 많은 옵션을 살펴봤습니다. ::before::after를 사용하여 생성된 콘텐츠를 삽입하여 가짜 테두리를 만들고 애니메이션을 적용합니다.

가장 눈에 띄는 점은 도움말에 사용된 애니메이션 시각화입니다. 원하는 효과를 얻기 위해 정확히 어떤 작업이 진행되고 있는지 설명하는 데 도움이 됩니다.

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

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

상자 모델 유지

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

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

기본 사항

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

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

맺음말

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