CSS - transform, transition, animation

luna238·2021년 10월 4일
0
post-thumbnail

transform

  • 요소의 좌표 공간을 변경하여 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
  • transition속성과 비슷해 보이지만, 전혀 다른 속성이기 때문에 유의해서 사용해야 합니다.

scale

  • 속성의 값으로 숫자를 사용하여 요소의 크기를 조절할 수 있습니다.
  • scale은 전부 작성하거나 하나만 작성할 수 있고, 하나만 작성하게 될 경우 가로 세로에 같은 값을 적용합니다. scaleX는 가로만, scaleY는 세로의 크기만 조절할 수 있습니다.

  • 위의 이미지는 width: 300px; transform: scale(0.5)의 값을 가지고 있고, 아래 이미지는 width: 150px의 값을 가지고 있습니다. 두 이미지의 크기는 같아 보이지만, scale을 활용하여 크기를 조절한 경우, 요소의 원래 크기는 유지하기 때문에 이미지는 절반의 크기로 줄었지만 300px만큼의 영역을 차지합니다.

rotate

  • 요소를 회전시킬 수 있습니다.
  • 속성값은 angle 자료형을 사용하는데, deg, grad, rad, turn을 형식에 맞게 사용합니다.
  • 음수값을 입력하면 역방향으로 회전합니다.

translate

  • 요소의 위치를 이동시킬 수 있습니다.
  • translatescale과 다르게 값이 하나면 x축에만 적용됩니다.
  • translageX는 가로만, translateY는 세로만 적용됩니다.
  • 음수값도 값만큼 반대 방향으로 이동합니다. 수치와 퍼센트 둘다 값으로 사용할 수 있습니다.

skew

  • 요소에기울이기 효과를 줘서 마름모꼴의 형태로 만들 수 있습니다.
  • deg로 값을 표기하는데, 값이 45deg가 되면 아래 위로 각이 아예 사라져서 콘텐츠가 보이지 않습니다.

transform-origin

  • background-origin과 유사하게 동작합니다.
  • 콘텐츠의 원점을 x축, y축기준으로 이동시킵니다.

transition

  • 요소가 시간차를 두고 변환되는 상태의 모습을 보여줄 수 있습니다.
  • 아래 소개되는 4가지 속성값을 한번에 사용할 수 있습니다. 다른 순서는 상관없지만, durationdelay값보다 앞에 위치해야 합니다.
    ex) transition: all 3s ease-in-out 1s;

transition-property

  • 요소의 css속성 중 transition의 효과로 변하는 속성만을 선택할 수 있습니다.
  • 해당하는 속성의 이름을 열거할 수도 있고, 그 외에 none은 어떤 속성도 선택하지 않는 것이고, all은 모든 속성을 선택하는 것입니다.

transition-duration

  • 요소가 변환되는 시간을 지정할 수 있습니다.
  • 단위는 s(초)ms를 지정할 수 있습니다.

transition-delay

  • 요소가 변환되기 시작하는 시간을 지연시킬 수 있습니다.
  • 여러가지 요소에 시간차를 두어, 도미노 효과와 같은 연쇄효과에 적용시킬 수 있습니다.

transition-timing-function

  • 요소가 변환되는 시간 내 과정 중의 속도를 설정할 수 있습니다.
  • 기본값은 ease이고, easein, easeout, easeinout, linear등의 값이 있고, cubic-bezier를 사용하여 수치도 입력할 수 있습니다.

animation

animationtransition과 달리, 다수의 스타일을 한번에 사용할 수 있습니다. 그리고 transition은 사용자의 행동에 의한 결과인데 animation은 사용자의 행동이 없어도 동작할 수 있습니다.

@keyframes

  • 애니메이션은 @keyframes를 통해, 애니메이션을 정의하고 사용할 수 있습니다.
  • from, to를 사용하거나 %를 지정하여 단계별 스타일을 적용시킬 수 있습니다.
  • animation은 단축 속성으로, 다른 속성들을 한번에 나열하여 작성할 수 있습니다. 최소한으로 animation-nameanimation-duration의 값은 포함되어야 합니다.
.animation {
  width: 100px;
  height: 100px;
  background-color: pink;
  animation: my-animation 1s infinite;
}

@keyframes my-animation {
  0% {
    width: 100px;
  }
  50% {
    width: 300px;
  }
  100% {
    width: 100px;
  }
}

animation-name, animation-duration

  • animation-nametransition-property처럼 사용되는 애니메이션의 이름을 나열해야 합니다.
  • animation-duration은 총 시간이 아닌, 애니메이션이 동작하는 한 싸이클의 시간입니다. 그러므로, 음수도 속성값으로 사용할 수 없습니다.

animation-delay, animation-timing-function

  • animation-delaytransition-delay처럼 동작이 지연되는 시간을 작성합니다. 음수 값을 허용하는데, -1s는 바로 실행되지만, 이미 1초동안 실행되었던 것 처럼 1초 뒤 부터 작동합니다.
  • animation-timing-functiontransition-timing-funciton과 같이, 애니메이션이 동작하는 시간 내의 속력을 조절할 수 있습니다.

animation-iteration-count, animation-direction

  • animation-iteration-count는 애니메이션이 반복되는 횟수를 설정할 수 있습니다. 기본값은 1이고, number형으로 값을 설정할 수 있습니다. 속성값 infinite는 계속해서 반복합니다.
  • animtaion-direction은 애니메이션이 진행되는 방향을 설정할 수 있습니다. 기본값은 normal로 정방향으로 진행되고, reverse, alternate, alternate-reverse를 사용하여 방향을 전환할 수 있습니다.

animation-play-state, animation-fill-mode

  • animation-play-state는 애니메이션의 진행 상태를 설정할 수 있습니다. 기본값은 running으로 paused를 사용하여, 일시정지 시킬 수 있습니다.
  • animation-fill-mode는 애니메이션이 시작하거나 끝났을 때의 스타일을 설정할 수 있습니다. forwards는 애니메이션이 끝나도 원래 스타일을 무시하고 마지막 애니메이션의 스타일을 적용하고, backwards는 애니메이션이 시작할 때 원래 스타일을 무시하고 처음 애니메이션의 스타일을 적용합니다.
profile
자기개발 :)

0개의 댓글