sanguk.dev
작성완료
요소의 이동과 애니메이션

요소의 이동과 애니메이션

요소의 이동, 회전, 확대, 축소, 비틀기를 위한 transform 속성, CSS 속성 변경 시 과정을 조절하는 transition, 그리고 세부 움직임을 시간 단위로 제어할 수 있는 애니메이션 속성에 대해 설명한다. 각 속성의 사용법과 특징이 포함되어 있으며, 애니메이션은 더 디테일한 조정이 가능하다는 점이 강조된다.

CSS & SASS & SCSS

트랜스폼 (transform)

  • 요소의 이동, 회전, 확대, 축소, 비틀기 등의 효과를 부여하기 위한 함수를 제공.
  • transform 속성에 원하는 function들을 값으로 전달하면 됨.
  • transform-origin : 요소의 기준점을 설정. 기본적으로는 50%, 50% (center)
  • transform 속성의 skew()를 사용하는 도중 X축과 Y축을 동시에 같이 비틀면 3D 효과처럼 나타낼 수 있음.
    사용법
css
div{
  transform: rotate(90deg) scale(1.5) translate(10px, 10px) skew(10deg);
  // 90˚회전, 1.5배 확대, 오른쪽으로 10px이동, 아래쪽으로 10px이동, 10˚비틀기
}

트랜지션 (transition)

트랜지션은 CSS 속성은 변경할 때 변화하는 그 과정을 조절하는 방법을 제공한다.

트랜지션의 특징

  • transition은 자동으로 발동되지 않는다.
  • 가상 클래스 선택자 또는 JS등의 액션에 의해 발동된다.
  • 자동 발동을 원하면 CSS 애니메이션을 사용한다.
  • 모든 CSS 속성이 transition이 가능한 것은 아니다.
    사용법
css
div{
  transition: width 1s linear 3s;
  // width가 변하는 과정을, 1초동안, 일정한 속도로, 3초있다가 실행
}
``
Code
transition: property duration timing-function delay;`
transition속성을 상세하게 나누어서 작성할 수도 있다.
- transition-property : 변화를 적용할 CSS속성
- transition-duration : 변화가 시작된 시점부터 끝날 시점까지의 시간을 지정
- transition-timing-function : 변화 속도의 패턴을 지정
- transition-delay : 변화를 시작할 시간 지정

### **애니메이션 (animation)**
- 단순히 요소의 프로퍼티 변화로 동작하는 transition과 달리, 애니메이션 속성은 하나의 줄거리를 구성하고 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하며 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
- 일반적으로 JS를 이용한 애니메이션보다 더 나은 렌더링 성능을 가진다고 알려졌지만, 경우에 따라 다르다.
- 비교적 작은 효과나 CSS만으로 충분한 효과를 볼 수 있는가***VS*** 바운스, 중지, 되감기 등의 고급 효과가 필요한가 (JS로)
- transition에 비해 훨씬 디테일한 조정(움직임 중 hover시 정지 등)이 더 쉽고 용이하다.
사용법
```css
div{
  animation: ani 10s infinite;
  // ani라는 이름을 가진 애니메이션을 실행, 10초동안, 무한반복
}

@keyframes ani{
  0%   {width: 0%;}
  100% {width: 100%;}
}

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation속성 또한 상세하게 나누어서 작성할 수도 있다.

  • animation-name : 애니메이션의 이름
  • animation-delay : 애니메이션을 시작할 시간 지정
  • animation-direction : 애니메이션이 종료되고 처음부터 다시 실행할지, 역방향으로 진행할지 지정
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정 (infinite로 지정하면 무한반복)
  • animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있음.
  • animation-timing-function : 중간 상태들의 속도패턴을 지정.
  • animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 어떤 값이 적용될지 지정