CSS border-top-left-radius 속성에 애니메이션 적용하기
CSS에서 border-top-left-radius 속성에 애니메이션 효과를 주려면 @keyframes 규칙을 활용하면 됩니다. 이 속성은 요소의 왼쪽 상단 모서리가 둥근 정도를 결정하며, 애니메이션과 결합하면 모서리가 부드럽게 변화하는 시각적 효과를 구현할 수 있습니다.
아래 예제는 테이블 요소에 3초 길이의 무한 반복 애니메이션을 적용한 코드입니다. 애니메이션이 진행되는 30% 지점에서 배경색, 테두리 색상, 그리고 왼쪽 상단 모서리의 둥근 반지름이 함께 변하도록 설정했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border: 2px solid black;
}
#newTable {
width: 500px;
height: 300px;
background: yellow;
border: 15px solid yellow;
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
30% {
background-color: orange;
border-spacing: 50px;
border-top-color: red;
border-top-left-radius: 150px;
}
}
</style>
</head>
<body>
<h2>border-top-left-radius 애니메이션 실행</h2>
<table id = "newTable">
<tr>
<th>Subject</th>
<th>Student</th>
<th>Marks</th>
</tr>
<tr>
<td>Maths</td>
<td>Amit</td>
<td>98</td>
</tr>
<tr>
<td>Science</td>
<td>Sachin</td>
<td>99</td>
</tr>
</table>
</body>
</html>코드 설명
#newTable 선택자에 animation: myanim 3s infinite;가 선언되어 있어, 'myanim'이라는 이름의 애니메이션이 3초 주기로 무한히 반복됩니다. @keyframes myanim의 30% 구간에서는 다음과 같은 스타일 변화가 일어납니다.
- background-color: orange; — 배경색이 노란색에서 주황색으로 전환됩니다.
- border-top-color: red; — 위쪽 테두리 색상이 빨간색으로 변경됩니다.
- border-top-left-radius: 150px; — 왼쪽 상단 모서리가 최대 150px까지 둥글게 변합니다.
border-top-left-radius는 애니메이션이 가능한(animatable) 속성이므로, keyframes 안에서 원하는 값만 지정하면 모서리가 자연스럽게 변화하는 효과를 손쉽게 만들 수 있습니다.