[ HTML/CSS ] 복잡한 애니메이션

1. 복잡한 애니메이션 정의할 땐 @keyframes

@keyframes key-ani {
  0% {
  	transform: translateX(0px);
  }
  50% {
  	transform: translateX(-100px);
  }
  50% {
  	transform: translateX(100px);
  }
  100% {
  	transform: translateX(0px);
  }
}

2. 물건 앞뒤를 구별해서 애니메이션 적용하고 싶을 때
    conatiner => transform-style: preserve-3d; 사용
    front => backface-visibility: hidden;