CSS에서 border-bottom-right-radius 속성은 요소의 오른쪽 아래 모서리 둥근 정도를 지정합니다. 이 속성의 값은 @keyframes 규칙과 animation 속성을 함께 사용하면 부드럽게 애니메이션 처리할 수 있습니다.
border-bottom-right-radius 애니메이션 예제
아래 코드는 div 요소의 오른쪽 아래 모서리 반지름을 150px에서 50px로 자연스럽게 변화시키는 애니메이션입니다. 배경색과 테두리 색상도 함께 전환되어 시각적으로 변화를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 400px;
background: yellow;
border: 10px solid yellow;
border-bottom-right-radius: 150px;
background-image:url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png');
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-color: maroon;
background-size: 90px;
border-bottom-color: green;
border-bottom-right-radius: 50px;
}
}
</style>
</head>
<body>
<h2>오른쪽 아래 테두리 반지름 애니메이션</h2>
<div></div>
</body>
</html>코드 설명
기본 스타일: div 요소는 500×400px 크기로 설정되고, 노란색 배경과 테두리가 적용됩니다. border-bottom-right-radius: 150px;로 오른쪽 아래 모서리가 크게 둥글게 처리됩니다.
@keyframes 규칙: myanim이라는 이름의 키프레임에서 20% 지점에 도달하면 다음 속성들이 변경됩니다.
background-color: 배경색이 maroon(적갈색)으로 전환됩니다.background-size: 배경 이미지 크기가 50px에서 90px로 확대됩니다.border-bottom-color: 아래 테두리 색상이 green으로 변경됩니다.border-bottom-right-radius: 오른쪽 아래 모서리 반지름이 150px에서 50px로 줄어듭니다.
animation 속성: animation: myanim 3s infinite;는 myanim 키프레임을 3초 동안 실행하고 무한히 반복하도록 설정합니다. 덕분에 모서리 둥근 정도가 계속해서 부드럽게 변화하는 것을 확인할 수 있습니다.