css100 챌린지, day3 (with animation)

1. 미리보기

css100 챌린지의 day3을 구현해보자! 해당 구현을 통해 세 개의 원에 각각 다른 애니메이션을 주는 방법을 알 수 있다.

See the Pen css100_day3 by KumJungMin (@kumjungmin) on CodePen.

2. 코드 분석

(1) html

• 원 역할을 하는 div를 3개 생성한다.

  <div class="frame">
  <div class="center">
    <div class="big-circle"></div>
    <div class="miidle-circle"></div>   
    <div class="small-circle"></div>
  </div>
  </div>

(2) scss

• 반복적으로 사용되는 코드는 mixin으로 선언하고 include로 사용한다.
• animation에서 alternate를 사용해 정해진 순서로 진행했다가 반대 순서로 진행하게 한다.
• infinite를 사용해 반복적으로 애니메이션을 진행시킨다.

@mixin circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid whitesmoke;
  background-color: white;
  box-shadow: 5px 5px 10px grey;
}

.big-circle {
  @include circle;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background-color: white;
  animation: bigCircleScale 5s infinite alternate; 
  /*정해진 순서로 진행했다가 반대 순서로 진행*/
}
.miidle-circle {
  @include circle;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  animation: middleCircleScale 5s infinite alternate;
}
.small-circle {
  @include circle;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  animation: smallCircleScale 5s infinite alternate;
}

• scale()은 컨텐츠의 배율을 조정할 수 있다.
• 큰 원 > 중간 원 > 작은 원 순서로 커지다가 작아져야 한다.
• 그러므로 큰 원(20%), 중간 원(40%), 작은 원(60%)부터 커지게 한다.
• animation에서 alternate를 지정했으므로, 커지는 애니메이션만 만들면 된다.

@keyframes bigCircleScale {
  0%, 20% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes middleCircleScale {
  0%, 40% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes smallCircleScale {
  0%, 60% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}