CSS Animation (Transition & Keyframes)

[ transform ]

 

transform 속성 : 해당 요소의 위치나 크기를 바꾸는 속성으로, 값으로 translate(200px, 400px) 혹은 translateX(200px), translateY(400px)를 줄 수 있습니다.

 

혹은 해당 요소의 크기를 바꾸는 속성으로, 마찬가지로 scale(0.5, 2), scaleX(0.5), scaleY(2)를 줄 수 있습니다.

 

혹은 요소를 회전시키기 위해 3차원 에서 해당 요소를 가로축, 세로축에서 회전킨다 rotate(60deg, 90deg), rotateX(60deg), rotateY(90deg), 그리고 요소를 시계방향으로 회전시키는 rotateZ(180deg)를 쓸 수 있다(마이너스값을 주면 반시계 방향으로 회전).

 

transform 이 일어나는 기준점을 변경하고 싶다면

 

transform-origin: x축 y축

 

이런 식으로 적용 해주면 됩니다.

 

 

 

[ transition ]

 

transition 속성은 해당 요소가 다른 상태로 가게 될 떄, 예를들어 :hover 상태로 가게 될 때, 기존의 css 속성과 다른 점이 있다면 자동으로 그 다른 속성이 변화하는 과정이 서서히 바뀌는 애니메이션 효과를 주는 것입ㄴ다.

 

그럴 땐

 

transition: 초s

 

이런 식으로 주면 되지만, 트랜지션이 특정 속성으로 한정짓고 싶다면

 

transition: 속성명 초s

 

트랜지션이 동작을 시작하기 전까지의 딜레이를 설정하고 싶다면

 

transition: 속성명 초s 딜레이s

 

여러 트랜지션 대상 속성을 지정하고 싶으면

 

transition: 속성명 초s 딜레이s 속성명2 초s 딜레이s

 

트랜지션 타입을 결정하고 싶다면, 딜레이 옆에 붙여주면 됩니다다.

 

transition: 속성명 초s 딜레이s 트랜지션 타입

 

 

 

 

[ keyframes ]

 

나만의 애니메이션을 만들고 싶다면 keyframes을 적극 활용할 수 있습니다.

 

@keyframes 이름 {

	from {
		대상 속성 : 속성 초기 값
	}

	to {
		대상 속성 : 변화된 속성 값
	}
    
}

 

혹은 진행도에 따른 속성 변화를 더 세밀하게 컨트롤하고 싶다면

 

@keyframes 이름 {

	0% {대상 속성 : 속성값}

	50% {대상 속성 : 속성값}

	100% {대상 속성 : 속성값}

}

 

을 통해 간단하게 만들 수 있고, 이 애니메이션을 등록하고 싶은 요소에 css 속성으로

 

animation-name: 이름

animation-duration: 초s

 

로 등록할 수 있습니다.

 

애니메이션은 페이지 로드와 함께 바로 일어나며, 애니메이션이 끝나면 초기 상태로 돌아갑니다. 하지만 초기상태로 돌이키지 않고, 애니메이션이 끝났을 때의 상태 그대로 두고 싶다면

 

animation-fill-mode: forwards;

 

을 쓰면된다. 하지만 애니메이션에서 설정한 요소의 초기상태와 실제 요소의 상태가 다르다면, 애니메이션이 수행될 때 요소가 갑작스럽게 움직이는 효과가 있을 것입니다. 이를 방지하고 싶다면

 

animation-fill-mode: backwards;

 

를 쓰면 되고, forwards와 backwards를 동시에 쓰고 싶다면

 

animation-fill-mode: both

 

를 쓰면 됩니다.

 

애니메이션이 수행되기까지 딜레이를 넣고 싶다면

 

animation-delay: 초s

 

를 넣으면 됩니다.

 

애니메이션이 여러 번 수행되도록 만들고 싶다면

 

animation-iteration-count: 횟수;

 

를 넣으면 됩니다.

 

계속 실행시키고 싶다면

 

animation-iteration-count: infinite;

 

를 넣으면 된다.

 

애니메이션이 from 에서 to가 아니라

 

to 에서 from으로 진행되도록 하고 싶다면

 

animation-direction: reverse;

 

를 줄수 있다.

 

from 에서 to로, 그 다음에는 to에서 from 으로 가도록 하고 싶다면

 

animation-direction: alternate-reverse;

 

를 주면 된다.

 

애니메이션의 진행도에 따라 다른 애니메이션을 적용시키고 싶다면

 

animation-timing-function: 애니메이션 타입;

 

을 주면 된다. 애니메이션 타입으로는

 

linear

ease-in

ease-in-out

 

등을 줄 수 있는데,

 

자신만의 애니메이션 타입을 만들어 넣을 수 있습니다.

 

animation-timing-function: cubic-bezier( 0.x, 0.x, 0.x, 0.x )

 

을 주면되는데,

 

이걸 일반인이 전문적으로 다루는 것은 힘드므로 cubic-bezier.com 에서 나만의 타입을 만들어낼 수 있으니 참고해 보시기 바랍니다.

 

지금까지는 너무 많은 속성을 길게 나열해놨는데, 이를 한번에 넣을 수 있는 shorthand가 제공됩니다.

 

animation: 이름 듀레이션 타이밍펑션 딜레이 이터레이션카운트 디렉션;

 

으로 주면 됩니다.

 

애니메이션을 서로 연결시킬 수도 있습니다.

 

애니메이션을 따로 만들어두고, shorthand에서

 

animation: 이름 듀레이션 타이밍펑션 딜레이 이터레이션카운트 디렉션 이름 듀레이션 타이밍펑션 딜레이 이터레이션카운트 디렉션;

 

이런식으로 반복시키면 됩니다.

 

한 애니메이션이 끝나면 다른 애니메이션이 수행되는 것이 아니라, 둘이 같이 진행되므로 주의해야 합니다. 그런건 딜레이를 조정해서 구현할 수 있습니다.