애니메이션

Transform

rotate : 입력한 각도만큼 특정 오브젝트를 회전시킨다. 음수도 가능하다.

scale : 오브젝트를 확대, 축소시킨다. 

 

 

 

 

High 버전에서도 사용할 수 있게 해 준다.

 

 

Transition (특정 조건 하에 연속적으로 변함)

property : 점점 변해가는 과정을 적용할 속성을 넣어주면 된다.

duration : 변하는 시간을 설정한다.

 

 

timing-function : 속도의 성격을 정한다.

delay : 특정 조건일 때(ex 마우스를 올려놨을 때) 효과를 몇 초 뒤에 발동시킬 건지 정한다.

 

 

 

 

순서는 상관없지만 duration 다음에 delay가 나와야 한다!

 

hover를 쓸 때 .transition:hover 이런 식으로 붙여 써야지 잘 동작한다!

(.transition :hover) -> 동작 안 함

 

 

 

Animation (특정 조건 필요 없음)

animation-name : 임의로 작성하면 된다.

animation-iteration-count : 무한대로 반복하고 싶다면 infinite를 넣어주면 된다.

@keyframes : 변화를 줄 결괏값을 입력해준다. Animation을 쓸 때 항상 써줘야 한다.

 

마찬가지로 Animation도 한 줄로 쓸 수 있는데 이 때도 duration을 먼저 쓰고 delay를 써야 한다.

 

 

 

응용

prefix를 사용한다면 keyframes에도 prefix를 적용해야 한다.

prefix가 달려있는 애니메이션을 두 개 만들었다면 keyframes도 두 개 만들어서 사용해야 한다. 즉 각각 적용해야 한다.

from과 to에도 prefix를 써줘야 한다.

 

이런 식으로 사용한다.