CSS [13] – 트랜스폼, 트랜지션, 애니메이션 사용법

CSS Tutorial – Full Course for Beginners

Lesson 22 – Animations

트랜스폼(transform)

div:first-child {
  background-color: dodgerblue;
  transform: translateX(50%);
}

div:nth-child(2) {
  background-color: yellow;
  transform: translateY(-2rem);
}

div:last-child {
  background-color: limegreen;
  transform: translate(100%, -5rem);
}

• translateX: move left(negative number) or right(positive number) -자기자신 위치를 기준으로 이동
• translateY: move up(negative number) or down(positive number) -자기자신 위치를 기준으로 이동

div:first-child {
  background-color: dodgerblue;
  /* transform: translateX(50%); */
  transform: rotateX(45deg);
  /* transform: scaleX(120%); */
  /* transform: skewX(-10deg); */
}

div:nth-child(2) {
  background-color: yellow;
  transform: rotateY(45deg);
}

div:last-child {
  background-color: limegreen;
  transform: rotateZ(90deg);
}

• rotateX: 가로 선을 기준으로 flipping
• rotateY: 세로 선을 기준으로 flipping
• rotateZ: 평면 위에서 시계 방향으로 rotate

div:first-child {
  background-color: dodgerblue;
  transform: scaleX(120%);
}

div:nth-child(2) {
  background-color: yellow;
  transform: scaleY(120%);
}

div:last-child {
  background-color: limegreen;
  transform: scale(120%, 120%);
}

• scaleX: 좌우 방향으로 크기가 커짐(100% 이하일 경우 작아짐)
• scaleY: 상하 방향으로 크기가 커짐(100% 이하일 경우 작아짐)

div:first-child {
  background-color: dodgerblue;
  transform: skewX(-10deg);
}

div:nth-child(2) {
  background-color: yellow;
  transform: skewY(10deg);
}

div:last-child {
  background-color: limegreen;
  transform: skew(-10deg, -10deg);
}

• skewX: 가로축 기준으로 tilt
• skewY: 세로축 기준으로 tilt

트랜지션(transition)

div:hover {
  background-color: midnightblue;
  /* transition-property: background-color, transform;
  transition-duration: 2s;
  transition-delay: 0.5s; */
  transition-timing-function: linear;
  transition: all 2s 0.5s;
}

• 예시는 div 콘텐츠 hover할 경우에 트랜지션 하도록 설정
• transition-timing-function: tansition이 적용되는 속도감 설정(속성값 별 미세한 차이)
  • ease가 기본 값
  • transition: all 2s ease 0.5s;

애니메이션(animation)

.animate {
  /* animation-name: slide;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 5;
  animation-direction: normal;
  animation-fill-mode: forwards; */
  animation: 5s ease-in-out 1s 2 normal forwards slide;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }

  33% {
    transform: translateX(600px) rotate(180deg);
  }

  66% {
    transform: translateX(-600px) rotate(-180deg);
  }

  100% {
    transform: translateX(0);
    background-color: rebeccapurple;
  }
}

• animation-direction
  • alternate: 재시작시 다른 방향으로 재생
• animation-fill-mode: ending sate를 결정
  • forwards: 애니메이션이 끝나고 나서도 콘텐츠가 100% 일때의 상태를 유지