프론트엔드/CS
[CSS - keyframes] 로딩 애니메이션(원 도형 크기, 투명도 변화)
턴태
2022. 9. 22. 15:51
See the Pen Untitled by seongtae (@stae1102) on CodePen.
CSS에서 애니메이션을 배웠습니다.
로딩창에서 원의 크기가 개별적으로 달라지는 애니메이션을 구현하곤 합니다.
이를 구현하기 위해서는 가상클래스와 keyframes를 사용합니다.
먼저 html입니다.
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</body>div 안에 span 태그를 3개 넣습니다. 이 span 태그가 원형 도형입니다.
그 다음 핵심인 CSS를 작성합니다.
.loading span {
display: inline-block;
width: 15px;
height: 15px;
background-color: grey;
border-radius: 50%;
animation: loading 1s linear infinite;
}- display: inline-block - inline 요소로 사용함과 동시에 가로배치하기 위해서 inline-block으로 설정했습니다.
- width, height - 원형 크기 속성입니다.
- background-color: grey - 임시로 설정한 도형 색상입니다.
- border-radius: 50% - 보더의 가장자리를 둥글게 만듭니다.
- animation: loading 1s linear infinite - 애니메이션 속성입니다. loading이라는 이름의 키프레임을 사용하여 1초동안 지속시키고, linear로 일정한 속도로 진행되도록 합니다(ease를 사용하면 fadeIn, fadeOut과 같이 시작과 끝이 부드럽게 천천히 작동합니다). 그리고 무한 반복하기 위해 infinite를 사용했습니다.
다음은 애니메이션입니다.
@keyframes loading {
0%,
100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}0%, 100% { opacity: 0; transform: scale(0.5); }- 애니메이션의 시작과 끝의 시점에서 투명하게 하며, 크기를 절반으로 줄입니다.50% { opacity: 1; transform: scale(1.2); }- 애니메이션을 선명하게 하고, 크기를 1.2배로 키웁니다.
이제 각각의 요소에 대해서 색상과 딜레이를 설정합니다. 딜레이를 설정하지 않아서 모든 원이 동시에 애니메이션이 실행됩니다.
.loading span:nth-child(1) {
animation-delay: 0s;
background-color: crimson;
}
.loading span:nth-child(2) {
animation-delay: 0.2s;
background-color: dodgerblue;
}
.loading span:nth-child(3) {
animation-delay: 0.4s;
background-color: royalblue;
}각각 딜레이를 조금씩 주고, 색상도 다르게 합니다. 이때 사용한 가상 클래스는 :nth-child()입니다.