[8일차-2] transition 과 animation

8일차-2

고오급 CSS에대해 공부했다. 예전엔 고급 기능의 CSS를 js로만 할수 있었는데 이제는 CSS로도 할수 있다.

transistion

 

이전 state에서 다른 state로의 변화를 애니메이션으로 만드는 방법이다. 예를들어 :hover를 생각해보면, 커서를 갖다대는 순간 즉시 스타일이 적용된다. 이 state의 변화를 스타일하는 것을 애니메이션화 하여, 좀더 부드럽고 멋있게 보이게 하는 것이다. 사용법은 어떤 것을 변화할지, 얼마 동안 변화할지를 작성하는 것이다. 예를 들어

a{
	transition : background-color 10s ease-in;
}

a:hover{
	background-color : red;
}

위와 같이 작성하였다면, a 태그에 커서를 갖다대었을 때, 원래대로였다면 단순한 state로의 변화를 감지하여 바로 바뀌어야했을 배경색이, transition이 적용되며 애니메이션화되어 10초의 시간동안 천천히 바뀌게 된것 이다. 즉, transisiton은 state에 따라 변경되는 property(background-color : red) 를 찾고 그 변화를 애니메이션화한다. (transition 은 state에 의해 변화하는 property가 있을 때 적용이 가능하다)

 

여기서 중요한 점은 transition을 해당 state를 가지고 있는 element(root)에 작성해야 한다는 것이다.

state를 다루는 (a:hover) 부분이 아닌 해당 element (a) 에 작성해야한다. 그리고 만약 모든 property의 변화를 transition하고 싶다면, 처음 자리에 all 을 사용하면 된다.

 

 

ease- function

 

브라우저에게 애니메이션이 어떻게 변할건지 알려준다. 예를들어 ease-in의 경우 처음에 빨라지고, linear의 경우 수평(좌우)로 움직일 수 있다. 단순히 state의 변화에 따라 바뀌는 property에 시간을 느리게해 애니메이션을 주는 것 뿐 아니라 자체적으로 애니메이션을 설정할 수 있다. 이런 맥락에서 cubic-bezier 라는 강력한 property로 나만의 가속, 감속, 움직임을 갖는 애니메이션을 커스텀 할 수 있다. 

 

 

transformation

css로 3d까지 만진다. rotate, scale, translate 등등 state의 변화에 따라 element를 변형시킨다. 

이건 transition과 달리 그냥 state에 따라 변화하는 property와 같다고 보면 될것 같다. 배경색을 바꾸고, 폰트 크기를 키우듯, 해당 element를 변형시키는 것이다.

 

주의할 요점이 있는데, 이 transformation이 적용된 element는 형제 element에 영향을 미치지 않는다.

예를들어

<img src = "img.jpg"/> 
<span>this is sibling</span>

img 태그에 오른쪽으로 이동하는 translateX가 100px만큼 이동하는 transformaiton이 적용되어있다고 치면, 형제 element인 <span>은 이를 알아채지 못한다. 그러니까 브라우저와 <span>태그는 여전히 이 <img> 가 원래 있던 자리에 있다고 알고 있는 것이다. 그래서 transform이 되어 크기가 커지거나 이동해 형제 element를 침범해도 밀려나지않는다. 실제로 해당 element가 이동한 것이 아니라 transfromation 이라는 property가 적용된 것 뿐이기 때문이다.

 

그리고 니꼴라스는 transform mdn 사이트를 추천해줬다. 여기서 수많은 transformation preset를 찾아 볼 수 있다.

 

 

 

Animation

 

위에서 구현한 애니메이션들은 transform과 transition이 있어야했다. 즉, state의 변화와 transition이 있어야 애니메이션이 발동이 됐다. 하지만 이것없이도 애니메이션을 구현할 수 있다. 사용방법은 다음과 같다. (예로 드는게 나을 것같음)

@keyframes anime {     
	from {
    	transform : ~~
    }
    to { 
    	transform : ~~
    }
}

a {
	animation : anime 5s ease-in
}

@keyframes 다음 내가 지정할 애니메이션 이름을 작성하고 그 안에 from과 to라는 요소를 가지며 이는 시작과 끝의 애니메이션을 뜻하며, 각각안에 변화를 일으킬 property를 작성한다. 애니메이션이 적용될 element에 animation : 애니메이션 이름 시간 ease- function 순서대로 작성한다. 물론 예제에는 property에 transform을 지정했지만, 다른 것도 가능하다. 하지만 안되는 property도 있다고 한다.(font-size같은..) 

 

애니메이션은 from과 to 말고도 다른 방법으로도 시점을 정할수 있는데 %(퍼센트)가 그 방법이다. 단순히 시작지점과 끝지점만 지정하는 것이 아닌, 더 구체적으로 0%, 50%, 100% 등 각 분기에 발동될 애니메이션을 쓸 수 있다.