[HTML] Keyframes, transition, transform

Keyframes

Keyframes 속성-애니메이션 지점 설정하기

애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 부분이 있다면 @keyframse 속성을 이용해 바뀌는 지점을 설정 할 수있다. 우선 웹 문서에서 여러 애니메이션을 구별해 주어야한다. 그리고 스타일 속성 값이 바뀌는 지점은 '선택자'로 입력한다.

 

기본형
@keyframse <이름> {
<선택자> {<스타일>}
 }

• <이름>은 animation-name 속성에서 사용합니다.
• @keyframse 속성을 사용할 때도 @-webkit-keyframse 나 @-moz-keyframse 처럼 브라우저 접두사를 붙여야한다.

 

애니메이션 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 하나 더 추가하면 됩니다. 시작과 끝 위치만 사용하겠다면 0% 와 100% 값 대신 from과 to라는 키워드를 사용해도 됩니다.

 

ex> 다음 예는 시작할 때 파란색 사각형이었다가 끝날 때 옆과 끝만 지정하기 때문에 from과 to 키워드를 사용합니다. 애니메이션이 끝나면 처음의 파란색 사각형으로 되돌아갑니다.

 

 

 

@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);
    }
}

 

transition

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

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초동안 돌아온다.