[css] transform, transition, animation

 

1. transform

요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여하는 속성. transform 대부분의 함수는 XYZ를 붙여 한 축으로만 변환하는 기능으로 사용할 수 있다.

 

함수 값	기능
rotate(10deg) / rotate(0.5turn)	시계 방향으로 회전. 음수로 작성하면 시계 반대 방향.
scale(2, 3)	width 2배, height 3배 확대. 축소하고 싶을 땐 1보다 작은 값 써주기.
skew(10deg, 20deg)	x축 10도, y축 20도 회전.
translate(100px, 200px) / (12px, 50%)	위치 변경.

작성 예시. 다중으로 작성할 수도 있다.

 

 

2. transition

transition은 요소의 두 가지 상태 사이의 변화를 설정해 주는 속성이다. 요소의 각 상태는 :hover나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것. 

 

속성	설명
transition-property	효과를 적용하고자 하는 속성. width, margin, all 등.
transition-duration	효과 동작 시간. 상태 변화가 일어나는 시간.
transition-timing-function	효과의 속도. duration으로 설정한 시간동안 일정하게 또는 점점 빠르게 등.
transition-delay	상태 변화가 시작되는 것을 지연.

(상태 변화를 설정하는 것이 아니다! 상태 변화가 '어떻게' 일어날지 설정하는 속성이다. 예를 들어 hover로 글씨 색 변화를 설정한 다음 transition: none을 적용하면 마우스를 올리는 즉시 글씨 색이 변한다. transition에서 color와 duration 2s를 적용하면 마우스를 올리는 순간부터 2초 동안 색 변화가 일어난다.)

 

> transition-property&transition-duration

 

 

> transition-timing-function

transition-timing-function: linear; 일정하게
transition-timing-function: ease-in; 천천히 시작하여 속도 증가
transition-timing-function: ease-out; 빠르게 시작하여 속도 감소
transition-timing-function: steps(6, end); 
6개 지점으로 나누어 발생하고 동작이 끝날 때 마지막 점프 발생
transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
베지어 곡선(그래픽의 동작을 수학적 곡선으로 표현한 것) 값을 활용

베지어 곡선으로 설정해 준 애니메이션의 움직임은 정말 재미있다. cubic-bezier 여기에서 설정 값에 따른 동작 변화를 확인해 볼 수 있다.

 

단축 속성으로 작성할 수 있다. 다중으로 작성할 때 주의할 것은 먼저 나오는 숫자가 duration 값이 되고 나중에 나오는 숫자가 delay 값이 된다는 것.

.class {
  transition: margin-left 4s ease-in-out 1s;
  /*property name | duration | timing-function | delay
  1초 지연 후 4초 동안 왼쪽 마진 값 변경. 속도는 느리게 시작하여 빨라졌다가 다시 느리게 */
}

 

 

3. animation

동작 조건 없이 상태 변화 효과를 줄 수 있는 속성. 웹페이지를 열자마자 동작한다.  transition은 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation은 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고, 전체 줄거리의 재생과 정지, 반복까지 제어가 가능하다.

속성	설명
animation-iteration-count	애니메이션 반복 횟수. 1.5와 같이 소수점 자리도 활용 가능.
animation-direction	애니메이션 진행 방향.
transition에서 사용했던 duration, timing-function, delay 등도 같은 개념으로 사용 가능.

가로 300px 파란색 박스가 가로 600px로 3초 동안 늘어났다가 줄었다가 무한 반복하는 코드이다.

위 코드 눈으로 확인하기

animation을 사용할 때는 @keyframes를 항상 같이 써줘야 한다. keyframes와 연결하기 위해 animation-name이 필요하다.

 

 

마찬가지로 단축 작성 가능하다. 다른 것은 순서에 상관없지만 무조건 먼저 나오는 숫자가 duration, 나중에 나오는 숫자가 가 delay이다.

.class {
    /* @keyframes duration | timing-function | delay | name */
	animation: 3s linear 1s slidein;
}

 

 

★ 이 글에서 본 세 가지 속성은 css3에서 나온 새로운 문법으로 하위 버전 웹에서 사용할 수가 없다. 그를 대비하기 위해서는 prefix 접두사를 붙여 써주어야 한다.

-webkit- 크롬, 사파리

-moz- 파이어폭스

-ms- 익스플로러 9.0

-o- 오페라