CSS에서 테두리에 애니메이션을 적용하는 여러 가지 방법 살펴보기
테두리 설정
요소에 테두리를 설정하는 데 사용할 수 있는 몇 가지 메서드(border
, outline
, box-shadow
)가 있습니다. 스테파니 에클스의 요소 테두리를 추가하는 3가지 CSS 방법에 자세히 설명된 대로, 각 접근 방식에는 특히 테두리 애니메이션과 관련하여 고유한 장단점이 있습니다. 적절한 CSS border
를 사용하지 않는 주된 이유는 애니메이션 때문입니다.
최근에 눈길을 사로잡은 도움말은 멋진 CSS 테두리 애니메이션으로, 저자인 Coco가 더 많은 옵션을 살펴봤습니다. ::before
및 ::after
를 사용하여 생성된 콘텐츠를 삽입하여 가짜 테두리를 만들고 애니메이션을 적용합니다.
가장 눈에 띄는 점은 도움말에 사용된 애니메이션 시각화입니다. 원하는 효과를 얻기 위해 정확히 어떤 작업이 진행되고 있는지 설명하는 데 도움이 됩니다.
흰색 레이어와 색상 라인은 모두 생성된 콘텐츠입니다. 흰색 레이어를 페이드 인 및 페이드 아웃하면 레이어가 쌓이는 방식과 애니메이션이 작동하는 방식을 명확하게 알 수 있습니다.
상자 모델 유지
생성된 콘텐츠를 사용하여 테두리를 모방하는 단점은 상자 모델이 손상된다는 것입니다. 이제 '테두리'가 아래에 그려지므로 콘텐츠가 가짜 테두리를 가릴 수 있습니다. 이를 완화하려면 원하는 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
에 맞게 백그라운드 크기를 조절하는 것이 가장 좋습니다.
/* 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
로 설정합니다. 이렇게 하면 배경이 더 이상 테두리 영역 아래에 그려지지 않습니다.
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 덕분에 이를 지원하는 브라우저에서는 간편하게 처리할 수 있습니다.
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
모두 합치면 코드는 다음과 같습니다.
보너스 콘텐츠: border-image
그라데이션 테두리를 그리는 이전에 다룬 접근 방식은 CSS border-image
를 사용하는 것입니다.
겹치는 배경을 처리할 필요가 없으므로 코드를 더 간소화할 수 있습니다. 애니메이션은 이전과 동일한 방식으로 적용할 수 있습니다.
/* 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
가 setbackground
아래가 아닌 위에 그려집니다. 배경을 반투명하게 하려면 문제가 될 수 있습니다.
맺음말
CSS에서 테두리에 애니메이션을 적용하는 방법에는 여러 가지가 있습니다. 사용 사례에 따라 둘 중 하나를 선택할 수 있습니다.