CSS Animation이란?

웹사이트에서 Interaction한 효과를 구현하고자 할 때 사용되는 것.

사용자가 어떠한 액션을 취하지 않더라도 자기 스스로 움직이는 효과를 구현하고자 할 때 주로 CSS Animation이 사용된다.

과거에는 JavaScript로만 구현을 해야 했지만 시간이 지나면서 CSS가 발전하면서 간단한 애니메이션 효과를 구현해 낼 수 있게 되었다.

CSS Animation 속성

1.Transform

• 선택한 Object의 크기를 확대/축소, 각도 회전, 위치 변경에 사용된다.

Rotate

• 선택된 영역에 회전효과를 적용하는 속성.
  transform: rotate(45deg)
  : rotate는 2차원 적인 회전 효과를 의미한다.
  평면적으로 회전을 하게되고 음수(왼쪽 회전)/양수(오른쪽 회전)를 전달할 수 있다

Scale

• 선택한 영역의 크기를 비율로 확대/축소 할 때 사용되는 속성.
  transform: scale(2, 3);
  : 2는 x축(width)으로 2배 3은 y축(height)으로 3배 늘린다는 뜻을 의미한다.
  소수점 단위를 이용하여 비율을 줄일 수도 있다.

Skew

• 선택한 영역의 각도에 영향을 미치는 속성, 3차원적인 회전 효과를 적용한다.
  transform: skew(10deg, 20deg);
  : 10deg는 x축으로 회전, 20deg y축으로 회전. 음수값을 적용하면 반대로 움직인다. 해외에서는 다양한 역동적인 애니메이션 효과를 적용하기 위해 자주 사용되는 편.

Translate

• 선택한 영역의 Object를 위치를 변경할 때 사용되는 속성.
  transform: translate(100px, 300px);
  : 100px는 x축으로 이동, 300px은 y축으로 이동. 최근에는 translate 속성으로 배치작업을 하는 경우가 일부 있다.

각 브라우저 하위버전까지 transform 적용을 원할시 prefix를 적용하면 된다.

-webkit-transform: rotate(10deg); < 크롬, 사파리 >
-moz-transform: rotate(10deg);  < 파이어폭스 >
-ms-transform: rotate(10deg); < 익스플로러 >
-o-transform: rotate(10deg);  < 오페라 >

Transition

: 애니메이션이 변화하는 과정을 보여주고 싶을 때 사용된다.

• 변화를 주고자 하는 영역 설정
  transition-property: width;
• 애니매이션이 진행되는 시간 설정.
  transition-duration: 2s;
• 애니메이션이 움직이는데 속도의 성격 지정 설정
  transition-timing-function: linear;
• 약간의 딜레이를 적용한 이후에 에니메이션 효과를 발동시킬 때 사용되는 속성
  transition-delay: 1s;

네줄짜리 코드를 한줄로 요약하면,
transition: width 2s linear 1s;

주의점) 순서는 상관이 없지만, 단 duration과 delay는 순서를 지켜줘야 한다.(1.duration 2.delay)

Animation 속성

자연스럽게 Object가 자동으로 움직이는 효과를 만들 때 사용되는 속성.

• 만들고자 하는 애니메이션의 이름을 정의.(이름은 본인이 원하는 이름대로 작성하면 된다)
  animation-name: changeWidth;
• 애니매이션이 진행되는 시간 설정.
  animation-duration: 3s;
• 애니메이션이 움직이는데 속도의 성격 지정 설정
  animation-timing-function: linear;
• 약간의 딜레이를 적용한 이후에 에니메이션 효과를 발동시킬 때 사용되는 속성
  animation-delay: 1s;
  

(Animation에만 있는 추가 속성)

• 애니메이션의 진행 횟수를 의미한다.
  animation-iteration-count: 6;(Infinite : 무한반복)
• 애니매이션의 진행 방향
  animation-direction: normal;
  (normal: 편도 / alternate: 왕복)

animation-name: spinLion;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;

네줄짜리 코드를 한줄로 요약하면,
animation: spinLion 1.5s linear infinite alternate 1s;

주의점) 순서는 상관이 없지만, 단 duration과 delay는 순서를 지켜줘야 한다.(1.duration 2.delay)

Animation에서도 prefix를 적용 할 수 있다.
보통은 가장 앞에 적용하면 되지만 단, @(prefix)Keyframes.