1. preview
See the Pen loading_circle by KumJungMin (@kumjungmin) on CodePen.
2. 코드 분석
1) html
<div>안에 세 개의<span>요소를 자식으로 둔다.<span>은 이제 로딩할 때의 원이 된다.<span>대신<div>를 써도 된다. 대신class이름을 지정해야한다.
(1) 하나의 div에 원 요소를 자식으로 둔다.
<body>
<div class="loading">
<span></span> <!--1. span은 하나의 원이다. -->
<span></span>
<span></span>
</div>
</body>2) css
(1) body안의 요소들을 상하좌우 중앙 배치한다.
body {
margin: 0;
display: flex; /*내부 요소들이 차례로 배치 */
justify-content: center; /*내부 요소의 좌우 정렬 상태를 가운데로 설정*/
align-items: center; /*요소는 세로 중앙 배치*/
height: 100vh; /*웹 크기 변화에 따라 변경되는 반응형 수치*/
}
(2) animation-delay를 이용하여 순차적으로 동작한다.
.loading span {
display: inline-block; /* span 내부요소들을 한줄로 세우기 */
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%; /* span을 동그랗게 */
animation: loading 1s 0s linear infinite;
/* 이벤트명 반복시간 딜레이시간 이벤트처리부드럽게 이벤트무한반복*/
}
.loading span:nth-child(1) { /*loading의 자식 중 첫번째 span*/
/*nth-child : 형제 사이에서의 순서*/
animation-delay: 0s;
background-color: red;
}
.loading span:nth-child(2) {
animation-delay: 0.2s;
background-color: orange;
}
.loading span:nth-child(3) {
animation-delay: 0.4s;
background-color: yellowgreen;
}
(3) keyframe을 사용하여 이벤트를 만든다.
- CSS 애니메이션에서 구간을 정하고 각 구간별로 다른 스타일을 적용시킬 수 있다.
animation-name은 사용자가 직접 지정한 이름으로, @keyframes 가 적용될 애니메이션의 이름이다.스테이지는 0~100% 의 구간CSS 스타일은 각 스테이지(구간)에 적용시킬 스타일
@keyframes loading { /*loading이라는 keyframe 애니메이션*/
0%, /* 0, 50, 100은 구간*/
100% {
opacity: 0; /* 안보였다가 */
transform: scale(0.5); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/
}
50% {
opacity: 1; /* 보였다가 */
transform: scale(1.2); /* 1.2배 */
}
}
반응형
'개발 기술 > css 애니메이션 (with js)' 카테고리의 다른 글
| (css, js) 햄버거 메뉴 애니메이션 만들기 (0) | 2021.09.26 |
|---|---|
| hover시 색이 변하는 애니메이션(with. box-shadow로 네온 효과) (0) | 2021.09.25 |
| 이미지 로딩 애니메이션(feat. 저화질, skeleton loading) (0) | 2021.09.23 |
| Traffic Light(신호등) 애니메이션을 만들자 (0) | 2021.09.16 |
| 커서 스타일 애니메이션을 만들어보자 (0) | 2021.09.16 |
댓글