오늘 우리 는 Carl Philipe Brenner 의 독창적 인 웹 사이트에서 볼 수있는 아주 미묘하지만 흥미로운 경계 애니메이션 효과를 탐구하고 싶습니다 . 그리드의 흰색 포트폴리오 항목 위로 마우스를 가져 가면 미묘한 애니메이션이 발생합니다. 그리드 항목이 투명 해지고 각면의 경계선이 시계 방향으로 움직여 정말 멋진 효과를냅니다. 이 경우 효과는 일부 JS를 사용하여 여러 스팬의 너비 또는 높이에 애니메이션을 적용하여 수행됩니다. 우리는 SVG와 CSS 전환을 사용하는 다른 접근법을 시도 할 것입니다.
모든 브라우저에서 지원되지 않을 수도있는 SVG에서 CSS 전환을 사용하게 될 것입니다.