[CSS] 애니메이션 실습 : 로딩

CSS : 애니메니션 만들기 : 로딩

이번 시간에는 CSS실습으로 귀여운 로딩 애니메이션을 만들어보겠습니다. 😄

---

#1. HTML

먼저 HTML 코드로 div를 이용하여 영역을 만들어 줍니다.

<div class="loading">
  <span class="circle1"></span>
  <span class="circle2"></span>
</div>

---

#2. CSS

다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다.
@keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다.

body {
  height: 100vh;
  background-image: linear-gradient(-60deg, plum 0%, skyblue 100%); /* 왼쪽 아래부터 그라디언트 시작 */
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 150px;
/*   background: #000; */
/*  시작은 빠르게 마지막은 천천히  */
  animation: loading 1s ease infinite;
}

.loading .circle1 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.loading .circle2 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  margin-top: 110px;
}

@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

---

#3. 결과보기