[2-2] 반응형 웹 사이트 구축하기 - 애니메이션

돌아가는 막대기 doorline 스타일 지정

// 막대기 돌려주기 - keyframes 활용 - 만들고 해당 속성에 부여
//  keyframes 작성 방법 다양 - from 과 to 활용
// 첫 번째 상태와 마지막 상태 지정
// from 과 to 말고도 0% 와 100%로 치환하여 사용 가능.
// 회전하니까 rotate 사용 - 0degree 에서 360degree 까지 360도 돌아가게
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Keyfrmaes 를 먼저 생성해주고

해당 속성에 부여한다.

// - keyframes 작성해주고 animation 지정해주기
  // - keyframes 에 지정해줬던 name 넣어주면 됨
  animation-name: rotate;
  // - 60초로 설정
  animation-duration: 60s;
  // - 60초 지나도 끝나지 않게 하기 - 무한
  animation-iteration-count: infinite;
  // 한 번 끝나도 부자연스럽게 다시 시작하거나 easing 있지 않게 하기.
  // = animation-timing-function에 linear 로 속도 변화가 없도록 조정
  animation-timing-function: linear;
  // 애니메이션이 끝나고 마지막 상태를 유지할 수 있도록 해줌
  animation-fill-mode: forwards;