07.01(animation)

animation

 

과정없이 변형된 여러가지 상태 보여줌

요소의 현재 스타일을 다른 스타일로 천천히 변화시킴

 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(@keyframes)을 정의해야 함

---

animation 속성

속성	설명
animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음
animation-name	애니메이션 효과의 이름을 설정
animation-duration	애니메이션 효과를 재생할 시간을 설정
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정
animation-iteration	애니메이션의 진행 방향을 설정
animation-timing-function	애니메이션 효과의 시간당 속도를 설정
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정
animation-play-state	애니메이션 효과의 재생 상태를 설정

 

@keyframes 규칙

 

애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의

키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시

@keyframes에 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일이 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화

애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해 주어야 함

<style>
p {
  -webkit-animation-name: moving-ani;
  -webkit-animation-duration: 3s;
  animation-name: movingPara;
  animation-duration: 3s;
}

@keyframes moving-ani {
  from { margin-left: 100%; }
  to { margin-left: 0%; }
}
</style>

<style>
p {
  -webkit-animation-name: moving-ani;
  -webkit-animation-duration: 4s;
  animation-name: movingPara;
  animation-duration: 4s;
}

@-webkit-keyframes moving-ani {
  0% { border-color: red; }
  20% { border-color: orange; }
  40% { border-color: yellow; }
  50% { border-color: green; }
  60% { border-color: blue; }
  80% { border-color: navy; }
  100% { border-color: purple; }
}
</style>

 

animation-duration

 

애니메이션 효과를 재생할 시간을 설정

재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않음

 

 

animation-delay

 

애니메이션 효과가 나타나기까지의 지연 시간을 설정

애니메이션 효과는 이 속성값으로 설정된 시간이 흐른 뒤에야 비로소 시작됨

 

 

animation-iteration-count

 

애니메이션 효과의 반복 횟수를 설정

이 속성값으로 infinite를 설정하면, 애니메이션 효과가 무한히 반복

 

 

animation-direction

 

애니메이션의 진행 방향을 설정

진행 방향을 나타내는 속성값으로 reverse와 alternate를 설정할 수 있음

 

reverse 속성값은 애니메이션 효과의 진행 방향을 원래 방향이 아닌 반대 방향으로 변경

즉, 애니메이션 효과가 from에서 to 방향이 아닌, to에서 from 방향으로 진행됨

 

alternate 속성값은 애니메이션 효과의 진행 방향을 애니메이션이 반복될 때마다 계속 변경

즉, 애니메이션 효과가 from에서 to 방향으로 한 번 진행되고 나면, 다음번에는 to에서 from 방향으로 진행되게 변경

이런 식으로 번갈아 가면서 전체 반복 횟수만큼 애니메이션을 반복

 

 

animation-timing-function

 

애니메이션 효과의 시간당 속도를 설정

 

animation-timing-function 속성의 속성값

값	설명
linear	애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행
ease	기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐
ease-in	애니메이션 효과가 천천히 시작
ease-out	애니메이션 효과가 천천히 끝남
ease-in	애니메이션 효과가 천천히 시작되어, 천천히 끝남
cubic-bezier(n,n,n,n)	애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행