이 게시물에서 CodePen에서 인기 있는 애니메이션이 어떻게 만들어졌는지 알아보세요. 이러한 애니메이션은 모두 이 섹션의 다른 도움말에서 설명한 성능이 우수한 기법을 사용합니다.
이러한 권장사항의 이론적 배경을 알아보려면 일부 애니메이션이 느린 이유는 무엇인가요?를 참고하고, 실용적인 팁을 알아보려면 애니메이션 가이드를 참고하세요.
마법사 로드 애니메이션
이 로드 애니메이션은 CSS로만 빌드되었습니다. 이미지와 모든 애니메이션은 CSS와 HTML로 만들어졌으며 이미지나 JavaScript는 없습니다. Chrome DevTools를 사용하면 웹페이지가 어떻게 만들어졌는지, 얼마나 잘 작동하는지 알 수 있습니다.
Chrome DevTools로 애니메이션 검사하기
애니메이션이 실행되는 상태에서 Chrome DevTools의 Performance 탭을 열고 애니메이션을 몇 초 동안 녹화합니다. 이 애니메이션을 실행할 때 브라우저가 레이아웃 또는 페인트 작업을 실행하지 않는다는 것을 요약에서 확인할 수 있습니다.
레이아웃과 페인트를 유발하지 않고 이 애니메이션을 구현한 방법을 알아보려면 Chrome DevTools에서 움직이는 요소를 검사하세요. 애니메이션 패널을 사용하여 다양한 애니메이션 요소를 찾을 수 있으며, 요소를 클릭하면 DOM에서 강조 표시됩니다.
예를 들어 삼각형을 선택하고 요소의 상자가 공중으로 이동하는 동안 회전하고 시작 위치로 돌아갈 때 어떻게 변환되는지 확인합니다.
요소가 선택된 상태에서 스타일 패널을 확인합니다. 여기에서 삼각형의 모양을 그리는 CSS와 사용 중인 애니메이션을 확인할 수 있습니다.
작동 방식
삼각형은 ::after 가상 요소를 사용하여 생성된 콘텐츠를 추가하고 테두리를 사용하여 모양을 만들어 생성됩니다.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
애니메이션은 다음 CSS 줄을 사용하여 추가됩니다.
animation: path_triangle 10s ease-in-out infinite;
Chrome DevTools에서 스타일 패널을 아래로 스크롤하여 키프레임을 찾을 수 있습니다.
여기에서 transform를 사용하여 요소의 위치를 변경하고 회전하여 애니메이션을 생성하는 것을 확인할 수 있습니다.
transform 속성은 애니메이션 가이드에 설명된 속성 중 하나로, 브라우저가 레이아웃 또는 페인트 작업을 실행하지 않도록 합니다 (이는 애니메이션 속도 저하의 주요 원인임).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
이 애니메이션의 움직이는 각 부분은 유사한 기법을 사용합니다. 그 결과 복잡한 애니메이션이 원활하게 실행됩니다.
맥동하는 원
이 유형의 애니메이션은 페이지에서 특정 항목에 주의를 끌기 위해 사용되기도 합니다. 애니메이션을 이해하려면 Firefox DevTools를 사용하면 됩니다.
Firefox DevTools로 애니메이션 검사
애니메이션이 실행되는 동안 Firefox DevTools에서 성능 탭을 열고 애니메이션을 몇 초 동안 녹화합니다. 녹화를 중지하면 폭포에 Recalculate Style 항목이 표시되지 않습니다. 이제 이 애니메이션이 스타일 재계산을 유발하지 않으므로 레이아웃 및 페인트 작업도 유발하지 않는다는 것을 알았습니다.
Firefox DevTools에서 원을 검사하여 이 애니메이션이 어떻게 작동하는지 확인합니다.
pulsating-circle 클래스가 있는 <div>는 원의 위치를 표시하지만 원 자체를 그리지는 않습니다.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
표시되는 원과 애니메이션은 ::before 및 ::after 유사 요소를 사용하여 구현됩니다.
::before 요소는 transform: scale 및 opacity에 애니메이션을 적용하는 pulse-ring이라는 애니메이션을 사용하여 흰색 원 밖으로 확장되는 불투명한 고리를 만듭니다.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
애니메이션이 적용되는 속성을 확인하는 또 다른 방법은 Firefox DevTools에서 애니메이션 패널을 선택하는 것입니다. 그러면 사용 중인 애니메이션과 애니메이션이 적용되는 속성이 시각화되어 표시됩니다.
흰색 원은 ::after 가상 요소를 사용하여 생성되고 애니메이션 처리됩니다.
애니메이션 pulse-dot는 애니메이션 중에 점을 확대 및 축소하기 위해 transform: scale를 사용합니다.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
이와 같은 애니메이션은 애플리케이션의 다양한 곳에서 사용할 수 있으므로 이러한 작은 터치가 앱의 전반적인 성능에 영향을 미치지 않도록 하는 것이 중요합니다.
순수 CSS 3D 구체
이 애니메이션은 매우 복잡해 보이지만 이전 예에서 이미 살펴본 기법을 사용합니다. 복잡성은 많은 수의 요소를 애니메이션으로 처리하는 데서 비롯됩니다.
Chrome DevTools를 열고 plane 클래스가 있는 요소 중 하나를 선택합니다.
구는 회전하는 평면과 스포크로 구성됩니다.
이러한 평면과 스포크는 래퍼 <div> 내부에 있으며 transform: rotate3d을 사용하여 회전하는 요소는 바로 이 요소입니다.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
점은 plane 및 spoke 요소 내에 중첩되어 있으며 변환을 사용하여 크기를 조정하고 변환하는 애니메이션을 사용합니다.
이렇게 하면 깜박이는 효과가 만들어집니다.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
이 애니메이션을 만드는 작업에는 타이밍을 올바르게 설정하여 회전 및 맥동 효과를 만드는 것이 포함되었습니다. 애니메이션 자체는 매우 간단하며 성능이 우수한 메서드를 사용합니다.
Chrome DevTools를 열고 애니메이션이 실행되는 동안 성능을 기록하면 애니메이션의 성능을 확인할 수 있습니다. 초기 로드 후 애니메이션은 레이아웃이나 페인트를 트리거하지 않으며 원활하게 실행됩니다.
결론
이 예시를 통해 성능이 우수한 메서드를 사용하여 몇 가지 속성을 애니메이션 처리하면 매우 멋진 애니메이션을 만들 수 있음을 알 수 있습니다. 애니메이션 가이드에 설명된 성능이 우수한 방법을 기본값으로 설정하면 페이지 속도 저하에 대한 걱정을 줄이면서 원하는 효과를 만드는 데 시간을 할애할 수 있습니다.