CSS의 border-top-right-radius 속성은 요소의 오른쪽 상단 모서리가 얼마나 둥글게 처리될지를 지정합니다. 이 속성에 애니메이션을 적용하면 요소의 모서리가 부드럽게 변화하는 시각적 효과를 만들 수 있습니다.
애니메이션을 구현하려면 @keyframes 규칙 안에서 border-top-right-radius 값을 변경한 뒤, animation 속성으로 해당 요소에 적용하면 됩니다. 아래 예제 코드를 실행해 직접 결과를 확인해 보세요.
예제
<!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-right-radius: 150px;
}
}
</style>
</head>
<body>
<h2>border-top-right-radius 애니메이션 실행</h2>
<table id = "newTable">
<tr>
<th>과목</th>
<th>학생</th>
<th>점수</th>
</tr>
<tr>
<td>PHP</td>
<td>Tom</td>
<td>90</td>
</tr>
<tr>
<td>Java</td>
<td>Henry</td>
<td>70</td>
</tr>
</table>
</body>
</html>코드 핵심 포인트
animation: myanim 3s infinite;— myanim이라는 이름의 애니메이션이 3초 동안 무한히 반복됩니다.@keyframes myanim— 애니메이션 진행률 30% 지점에서 스타일이 변경되도록 정의합니다.border-top-right-radius: 150px;— 테이블의 오른쪽 상단 모서리가 점차 150px까지 둥글어집니다.
이처럼 @keyframes와 animation 속성을 조합하면 border-top-right-radius뿐만 아니라 배경색, 테두리 색상 등 다른 CSS 속성도 함께 자연스럽게 애니메이션 처리할 수 있습니다.