CSS의 애니메이션, transition과 keyframes에 대해서 알아보겠습니다. 이 글은 mdn과 css-tricks의 글을 토대로 쓰여졌습니다.
transition을 이용하면, 요소의 상태가 바뀜에 따라 일종의 애니메이션을 줄 수 있다.
: we can animate a change from one state to the other. transition이라는 property는 state(ex. :hover)가 없는 element에다가 넣어야 한다.(일종의 부모 element?) 그리고 변화시키기로 결정한 state의 property에 대하여 쓴다. property-value의 변화를 animate하려고 만든 게 transition임.
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
a {
transition: color 1s, background-color 5s;
}
a:hover {
color: blue;
background-color: red;
font-size: 100px;
}
-> 'all' 로 지정해서 모든 변화에 대해 transition을 줄 수 있다.
animation에 대해서 구체적인 변곡선을 만들 수 있다. ease, ease-in, ease-out, ease-in-out, linear 또한 자주 쓰이는 cubic-bezier 값들을 모아놓은 것이다.
transition은 property의 위에 있는 property 이다. cubic-bezier은 property의 변화(state)를 animate하는 곡선 혹은 식 , 즉 transition이 이루어지는 방식이구나!
transform은 요소 자체의 크기를 바꾸지 않는다. 3D의 차원이기 때문에 margin과 padding이 적용되지 않는다. 화면상의 픽셀을 움직인다고 보면 된다.
transform: rotateX(30deg);
transform: sclae(3, 3);
transform: translateY(100px);
@keyframes는 keyframes안에서 style을 선언함으로써 CSS 애니메이션의 순서를 결정한다. 이는 transition보다 더 구체적이고 강력한 애니메이션 단계를 만들 수 있는 힘이다.
keyframes는 animation에 대한 일종의 식을 만든다.