transform과 keyframes로 애니메이션 만들기

transform

대상을 변형시킬 수 있다

transform: skew(각도); =>비틀기

transform: rotate(각도); =>회전

 

이 외에도 scale() => 확대/축소

translate( , ) => 좌표이동

 

등이 있으니 자동완성으로 확인해 보고 쓰면 된다.

 

---

@keyframes

@keyframes 애니메이션이름{ ...} 으로 작성할 수 있다.

애니메이션이 몇% 진행되었을 때의 모습을 각각 지정 해 주면 된다.

 

이 애니메이션을 사용할 때는

animation-name: 

animation-duration: 지정해 주면 된다.