CSS의 border-bottom-left-radius 속성은 요소의 왼쪽 아래 모서리 둥근 정도를 조절하는 속성입니다. 이 속성에 @keyframes 규칙을 활용한 애니메이션을 적용하면 모서리가 부드럽게 변하는 시각적 효과를 만들 수 있습니다.
아래 예제 코드를 실행하면 노란색 배경의 div 요소에서 왼쪽 아래 모서리의 둥근 반지름이 주기적으로 변화하는 애니메이션을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 400px;
background: yellow;
border: 10px solid green;
border-bottom-left-radius: 150px;
animation: myanim 3s infinite;
background-position: bottom left;
background-size: 50px;
}
@keyframes myanim {
20% {
background-size: 90px;
border-bottom-left-radius: 50px;
}
}
</style>
</head>
<body>
<h2>왼쪽 아래 모서리 반지름 애니메이션</h2>
<div></div>
</body>
</html>
코드 설명
- border-bottom-left-radius: 150px; — 초기 상태에서 왼쪽 아래 모서리를 150px만큼 둥글게 처리합니다.
- animation: myanim 3s infinite; — myanim이라는 이름의 애니메이션을 3초 주기로 무한히 반복 실행합니다.
- @keyframes myanim — 애니메이션 진행률 20% 지점에서
background-size와border-bottom-left-radius값이 각각 90px, 50px로 변경됩니다.
이처럼 @keyframes 안에서 원하는 진행 시점(%)별로 스타일 값을 지정하면, 모서리 둥근 정도뿐 아니라 다양한 CSS 속성도 함께 자연스럽게 애니메이션할 수 있습니다.