디자인 아틀라스
EN
↝ 모션

블러 인

Blur-in

요소가 흐릿한 상태에서 선명하게 초점이 맞아가며 나타나는 등장 효과. filter: blur()와 opacity를 함께 애니메이션합니다.

다른 이름: Blur revealDefocus transition
···
html
<div class="tile"><span>FOCUS</span></div>
css
.tile{width:min(70%,220px);aspect-ratio:16/10;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-3));
  display:grid;place-items:center;color:#fff;font:800 20px/1 sans-serif;letter-spacing:.04em;
  animation:blurin 2.6s ease-in-out infinite}
@keyframes blurin{
  0%{opacity:0;filter:blur(18px);transform:scale(1.06)}
  30%{opacity:1;filter:blur(0);transform:scale(1)}
  70%{opacity:1;filter:blur(0);transform:scale(1)}
  100%{opacity:0;filter:blur(18px);transform:scale(1.06)}
}

filter: blur(18px) 정도의 큰 값에서 blur(0)으로, 동시에 opacity를 0에서 1로 옮깁니다. blur만 애니메이션하면 흐릿한 상태에서도 경계가 다 보여서 "이미 거기 있었다"는 느낌이 강하니, opacity를 함께 써야 진짜 "나타나는" 느낌이 납니다.

blur는 매 프레임 다시 그려야 하는 무거운 필터라, 큰 배경 이미지 전체에 걸면 프레임이 떨어질 수 있습니다. 작은 요소(카드, 텍스트, 아이콘)에 제한적으로 씁니다.

언제 쓰나

이미지나 히어로 텍스트가 등장할 때, "카메라 초점이 맞는" 듯한 고급스러운 인상을 주고 싶을 때 씁니다.