CSS에서 clip 속성에 애니메이션을 적용하면 요소의 특정 영역만 부드럽게 나타나거나 사라지는 시각적 효과를 만들 수 있습니다. clip 속성은 절대 위치(absolute)로 지정된 요소를 잘라내어 보이는 범위를 조절하는 데 사용됩니다.
clip 속성 애니메이션 예제
아래 코드는 @keyframes 규칙을 활용해 clip 속성 값이 3초 주기로 무한 반복되며 변화하는 애니메이션 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: yellow;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
clip: rect(0,100px,50px,0);
}
@keyframes myanim {
20% {
bottom: 100px;
clip: rect(0,150px,40px,0);
}
}
</style>
</head>
<body>
<h2>clip 속성 애니메이션 실행</h2>
<div></div>
</body>
</html>코드 설명
- position: absolute; — clip 속성은 반드시 절대 위치 요소에만 적용되므로 position 값을 absolute로 설정했습니다.
- clip: rect(0,100px,50px,0); — rect() 함수는 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 잘라낼 영역을 지정합니다. 초기 상태에서는 너비 100px, 높이 50px 영역만 화면에 표시됩니다.
- @keyframes myanim — 애니메이션이 진행되는 동안 20% 지점에서 bottom 값과 clip 영역이 함께 변경되어 요소가 위로 이동하면서 잘리는 범위도 달라집니다.
- animation: myanim 3s infinite; — 정의한 keyframes를 3초 동안 무한히 반복 실행합니다.
참고 사항
clip 속성은 현재 CSS 표준에서 폐기(deprecated)된 상태이며, 최신 브라우저에서는 더 유연하고 강력한 clip-path 속성 사용을 권장합니다. 다만 기존 코드 호환성을 위해 clip 속성은 여전히 일부 환경에서 동작합니다.