CSS에서 테두리에 애니메이션을 적용하는 여러 방법 살펴보기
테두리 설정
요소에 테두리를 설정하는 메서드에는 border, outline, box-shadow가 있습니다. 스테파니 에클스가 저술한 요소 테두리를 추가하는 3가지 CSS 메서드에 자세히 설명된 것처럼, 각 방식에는 고유한 장단점이 있으며 특히 테두리에 애니메이션을 적용할 때는 더욱 그러합니다. 적절한 CSS border를 사용하지 않는 주된 이유는 애니메이션 목적입니다.
outline-offset Kevin J. 파월최근 눈길을 끄는 기사는 코코가 더 많은 옵션을 살펴봤을 때 저자가 쓴 Fantastic CSS body animation입니다. ::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를 채우기로 설정하면border-image는 설정된background아래가 아니라 상단에 페인트됩니다. 배경을 반투명으로 만들려는 경우 이 방법은 번거로울 수 있습니다.
맺음말
CSS에서 테두리에 애니메이션을 적용하는 방법은 다양합니다. 사용 사례에 따라 둘 중 하나를 사용할 수 있습니다.