[22.06.01] TIL

animation, @keyframes

 .yellow {
    width: 100%;
    height: 100%;
    background-color: yellow;
    transform: rotate(-5deg);
    animation-name: slidein;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes slidein {
    0% {
      transform: rotate(-5deg);
    }

    50% {
      transform: rotate(5deg);
    }
  }

animation-name: 애니메이션의 중간 상태를 지정. 중간 상태는 @keyframes 규칙을 이용하여 기술
animation-duration: 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정
animation-iteration-count: 몇 번 반복될지 지정
@keyframes: 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어

애니메이션 재미따...

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes