[CSS] 키프레임 애니메이션 활용한 예제

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다.

 

 

1. 도형 로딩 애니메이션 예제

See the Pen keyframe animation_01 by limhaneul2244 (@limhaneul2244) on CodePen.

 

 

 

 

 

 

빨간 border안에서 박스가 회전되게 하려면 

@keyframes SquareLoading {
  0% {
    top: 0;
    left: 0;
    /*시작 방향이 left였다면 그 다음에는 right가 될 수 없다.
    right로 지정할 경우 다시 되돌아 오지 않는다.*/
  }
  25% {
    top: 0;
    /*right: 0; */
    /*right로 지정할 경우 다시 되돌아 오지 않는다.*/
    /*left: 100%; */
    left: calc(100% - 20px);
    background-color: skyblue;
  }
  50% {
    /*top: 100%; */
    top: calc(100% - 20px);
    /*left: 100%; */
    left: calc(100% - 20px);
    background-color: orange;
  }
  75% {
    top: calc(100% - 20px);
    left: 0;
    background-color: pink;
  }
  100% {
    top: 0;
    left: 0;
  }
}

이렇게 박스의 너비와 높이값 만큼을 calc로 빼서 넣어줄 수 있다. 

 

 

---

2. 더블 보더 레디어스 애니메이션

See the Pen keyframe animation_02 by limhaneul2244 (@limhaneul2244) on CodePen.

 

span마다 각기 시간을 달리 해서 다르게 돌아가는 것처럼 보이게 하고, 2번째 span은 역방향으로 돌려준다.

 

 

🙌새로 배운 팁!

 

border-radius를 개성있는 원형으로 만들고 싶다면중첩해서 사용이 가능하다.

  border-radius: 40% 60% 65% 56% / 50% 30% 40% 65%;

 

---