이 게시물에서는 CodePen에서 볼 수 있는 몇 가지 인기 애니메이션이 어떻게 만들어졌는지 알아봅니다. 이러한 애니메이션은 모두 이 섹션의 다른 문서에서 설명하는 성능 기준에 맞는 기법을 사용합니다.
자세한 이론은 일부 애니메이션이 느린 이유는 무엇인가요?를 참고하세요. 이 권장사항 및 실용적인 도움말은 애니메이션 가이드를 참조하세요.
마법사 로드 애니메이션
이 로딩 애니메이션은 전적으로 CSS로 제작됩니다. 이미지와 모든 애니메이션이 CSS와 HTML로 생성되었습니다. 자바스크립트가 필요 없습니다. 어떻게 만들어졌으며 얼마나 잘 작동하는지 이해하려면 Chrome DevTools를 사용할 수 있습니다.
Chrome DevTools로 애니메이션 검사
애니메이션이 실행 중일 때 Chrome DevTools에서 성능 탭을 열고 애니메이션을 몇 초 동안 녹화합니다. Summary에서 이 애니메이션을 실행할 때 브라우저가 레이아웃 또는 페인트 작업을 하고 있지 않음을 확인할 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">레이아웃과 페인트를 유발하지 않고 이 애니메이션이 어떻게 구현되었는지 알아보려면 Chrome DevTools에서 움직이는 요소를 검사할 수 있습니다. Animations 패널을 사용하면 다양한 애니메이션 요소를 찾을 수 있습니다. 아무 요소나 클릭하면 DOM에서 해당 요소가 강조표시됩니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">예를 들어 삼각형을 선택하면 요소의 상자가 공중으로 들어가는 동안 어떻게 변형되는지 관찰합니다. 시작 위치로 돌아갑니다.
<ph type="x-smartling-placeholder">요소를 선택한 상태에서 스타일 패널을 확인합니다. 여기에서 삼각형의 모양을 그리는 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에 대한 항목이 없는 것을 볼 수 있습니다. 이제 이 애니메이션이 스타일을 다시 계산하지 않는다는 것을 알았습니다. 따라서 레이아웃 및 페인트 작업이 필요합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이 애니메이션이 어떻게 작동하는지 확인하기 위해 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 요소는 흰색 원 밖으로 확장되는 불투명 링을 만듭니다.
pulse-ring이라는 애니메이션을 사용하여
이 코드는 transform: scale 및 opacity에 애니메이션을 적용합니다.
.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에서 Animations 패널을 선택하는 것입니다. 그러면 사용 중인 애니메이션의 시각화가 표시됩니다. 애니메이션으로 표시되는 속성을 선택할 수 있습니다
<ph type="x-smartling-placeholder">흰색 원 자체는 ::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 구
CodePen에서 Pure CSS 3D Sphere 보기
이 애니메이션은 엄청나게 복잡한 것 같아 그러나 이전 예에서 이미 본 기법을 사용합니다. 복잡성은 많은 요소에 애니메이션을 적용할 때 발생합니다.
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를 열고 실행 중에 성능을 기록하여 이 애니메이션의 성능을 확인할 수 있습니다. 초기 로드 후 애니메이션이 레이아웃 또는 페인트를 트리거하지 않습니다. 원활하게 작동합니다
결론
이 예에서는 성능 기준에 맞는 메서드를 사용하여 몇 가지 속성에 애니메이션을 적용하여 매우 멋진 애니메이션을 만드는 방법을 확인할 수 있습니다. 기본적으로 애니메이션 가이드에 설명된 성능 기준에 맞는 메서드로 설정 페이지를 느리게 만드는 것에 대한 걱정 없이 원하는 효과를 만드는 데 시간을 쓸 수 있습니다.