TIL 5. CSS 애니메이션 : transition과 keyframes

rahula·2021년 5월 4일
0
post-thumbnail

CSS의 애니메이션, transition과 keyframes에 대해서 알아보겠습니다. 이 글은 mdn과 css-tricks의 글을 토대로 쓰여졌습니다.

Transition

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을 줄 수 있다.
  • 알고 있으면 편한 transition 기능들 : ease, ease-in, ease-out, ease-in-out, linear.

cubic-bezier

animation에 대해서 구체적인 변곡선을 만들 수 있다. ease, ease-in, ease-out, ease-in-out, linear 또한 자주 쓰이는 cubic-bezier 값들을 모아놓은 것이다.

transition은 property의 위에 있는 property 이다. cubic-bezier은 property의 변화(state)를 animate하는 곡선 혹은 식 , 즉 transition이 이루어지는 방식이구나!

transformations

transform은 요소 자체의 크기를 바꾸지 않는다. 3D의 차원이기 때문에 margin과 padding이 적용되지 않는다. 화면상의 픽셀을 움직인다고 보면 된다.

transform: rotateX(30deg);
transform: sclae(3, 3);
transform: translateY(100px);
  1. rotate : X Y Z or 3D. 각 축에 따라서 회전시킴
  2. scale : 원래 사이즈의 n배로
  3. translate : 픽셀 차원에서 element를 움직임.
  4. 기타. mdn 소스

keyframes

@keyframes는 keyframes안에서 style을 선언함으로써 CSS 애니메이션의 순서를 결정한다. 이는 transition보다 더 구체적이고 강력한 애니메이션 단계를 만들 수 있는 힘이다.

keyframes는 animation에 대한 일종의 식을 만든다.

profile
백엔드 지망 대학생

0개의 댓글