transition과 transform, 그리고 keyframe

transition이란 이전 상태에서 이후 상태로의 변화를 animation화 하는 것이다.

a {
  color: wheat;
  background-color: tomato;
  text-decoration: none;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 55px;
  transition: background-color 10s ease-in-out, color 5s ease-in-out
}
a:hover {
  color: tomato;
  background-color: wheat;
}

transition은 state가 없는 element에 붙어야 한다. 위의 경우 hover 효과가 없는 a selector에 입력해야 한다. 즉, transition이 hover와 a selector 사이의 동일 property를 찾아 두 지점의 변화를 애니메이션으로 처리 하는 것이다.

위의 transition효과로 background-color는 10초동안 ease-in-out 즉, 천천히 바뀌며, color는 5초동안 천천히 ease-in-out된다. transition의 value는 콤마(,)를 붙여 여러 개의 값을 설정할 수 있다.

transition: all 5s ease-in-out

두 개의 값(배경색,글자색)은 all로 통일해 동일한 값을 부여할 수 있다. 하지만 이 때엔 transitions과 적용될 selector 모두 동일한 property가 설정되어야 한다.

ease-in funciton은 애니메이션이 어떻게 변화할 지를 결정한다. transition: all 5s linear 에서, linear는 무언가를 직선으로 움직이게 만든다. 초반과 후반의 속력 차이 효과 없이 직선으로 움직인다.

linear ↔ ease-in-out 둘은 다른 효과를 가지는데, 후자는 속력에 차이가 있는 반면 전자는 속력 변화 없이 움직인다. ease-in, ease-out 등 모두 조금씩 다른 효과를 수행한다. default로 갖고 있는 것은 linear, ease-in, ease-in-out, ease-out, ease.

transition: all 5s cubic-bezier(0.500, 0.250, 0.500, 0.750)

cubiz-bezier는 또 하나의 다른 property로, 원하는 가속이나 감속 설정을 만들 수 있다. 대게 ease-in, ease-out, ease-in-out을 많이 사용하게 된다.

transform: rotateY(80deg) rotateX(20deg) rotateZ(10deg);

transform은 element를 변형시킬 수 있다. Y축을 기준(수직)으로 80도 돌아가고, X축을 기준(수평)으로 20도 돌아가며, Z축을 기준(좌우반전)으로 10도 돌아간다. transform은 box 차원에서 일어나지 않는다. 옆의 다른 tag들은 움직임 없이 그대로 있으며, transform의 영향을 받은 element만이 움직인다.

scaleX() scaleY() → X축이나 Y축을 기준으로 크기가 커진다.

scale(2, 2) → X축과 Y축 모두 크기가 2배 커진다.

translateX(300px) → 오른쪽으로 300px 움직인다. -300px이라면 왼쪽으로 300px 움직인다.

img {
  border: 5px solid black;
  border-radius: 50%;
  transition: transform 5s ease-in-out;
}
img:hover {
  transform: rotateZ(90deg);
}

transition과 transform을 결합해 움직이는 이미지를 만들 수 있다. 위 코드는 이미지가 5초 간격으로 오른쪽으로 회전한 뒤 마우스를 떼면 제자리로 5초동안 돌아온다.

결국 transition이 모든 동작들을 애니메이션으로 보이게끔 만들어 준다고 할 수 있다. A state를 B state로 만들어 주는 것이다.

@keyframes ani {
    from {
        transform:rotateX(0);
    }
    to {
        transform:rotateX(360deg);
    }
}
img {
    border: 5px solid black;
    border-radius: 50%;
    animation: ani 5s ease-in-out;
}

@keyframes ani_name 으로 animation을 만들 수 있다. 여태까지는 transition과 :hove 등 마우스 동작에 의존했지만 keyframes 이용시 자동으로 계속해 움직이는 애니메이션을 만들 수 있다.

keyframes function을 적용할 selector로 입력(animation: ani 5s ease-in-out;)해 동작한다. animaiton에 infinite값을 주면 멈추지 않고 계속해서 animation이 실행된다.

@keyframes ani {
    0% {
        transform:rotateY(0);
    }
    50% {
        transform:rotateY(360deg) translateY(100px);
    }
    100% {
        transform:rotateY(0);
    }
}

0%에서 시작해 50%의 동작을 완료한 뒤, 다시 0%로 ‘끊기듯’ 돌아가는 게 아닌, 100%로 인해 ‘되감기처럼’ 돌아간다. 위의 3단계처럼 우리는 원하는 만큼 단계를 잘라 @keyframes를 설정할 수 있다. font-size 등 animation에 적용되지 않는 property들도 있다.