[CSS] transform, transition, animation

✔️ transform 속성

.item {
  transform: transform속성;
}

• 주위 요소들에 영향을 끼치지 않으면서 요소에 2D 또는 3D 변환을 적용합니다.
• transform-origin: x y;을 이용해 transform을 적용하는 중심을 설정할 수 있습니다.

 

📌 translate(x, y)

• 요소를 x축과 y축에서 주어진 값이 양수이면 오른쪽으로 음수이면 왼쪽으로 이동시킵니다.
• translateX, translateY 로 x축과 y축의 값을 따로 줄 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 rotate(Ndeg)

• 요소를 주어진 각도만큼 양수이면 시계방향으로 음수이면 반시계 방향으로 회전시킵니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 scale(N)

• 요소의 크기를 주어진 배율만큼 1보다 크면 늘리고 0보다 크고 1보다 작으면 크기를 줄입니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 skew(Xdeg, Ydeg)

• 요소를 주어진 각도만큼 양수이면 축의 양의 방향으로 음수이면 축의 음의 방향으로 x축과 y축 방향으로 기울입니다.
• skewX, skewY로 x축과 y축의 값을 따로 줄 수 있습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

• 모든 transform 속성을 한 줄에 설정할 수 있도록 해주는 단축 속성입니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ transition

.item {
  transition: property값 delay값 timing-function값 duration값;
}

• 요소의 속성값을 정해진 시간 동안 부드럽게 변화시키기 위해 사용합니다.
• transition-property 와 transition-delay를 꼭 지정해야합니다.
• 콤마(,)를 사용해 여러 속성값에 적용할 수 있습니다.

 

📌 transition-property

• 요소에 추가할 전환 효과를 설정합니다.
  • none : 전환 효과를 설정하지 않습니다.
  • all : 모든 속성에 전환 효과를 설정합니다.
  • <property> : 특정 속성에 전환 효과를 설정합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 transition-delay

• 전환 효과가 나타나기 전까지의 지연 시간을 설정합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 transition-timing-function

• 전환 효과의 시간당 속도를 설정합니다.
  • linear : 처음부터 끝까지 일정한 속도로 진행됩니다.
  • ease : 기본값으로 전환 효과가 천천히 시작되어 그 다음에는 빨라지고 마지막에는 다시 느려집니다.
  • ease-in : 천천히 시작됩니다.
  • ease-out : 천천히 끝납니다.
  • ease-in-out : 천천히 시작되어 천천히 끝납니다.
  • cubic-bezier : 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
• Make cubic-bezier

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 transition-duration

• 전환 효과가 지속될 시간을 설정합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ animation

• 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환시켜줍니다.

 

📌 자바스크립트와 비교한 애니메이션의 장점

• 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
• 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할 때가 있지만 CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
• 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.

 

📌 transition VS animation

• trasition
  • 요소의 상태가 변해야만 애니메이션을 실행합니다.
  • 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현합니다.
• animation
  • 요소의 모양과 동작을 키프레임 단위로 재생 횟수, 재생 방향 등을 제어한대로 애니메이션이 실행됩니다.
  • 요소의 상태 변화와 상관 없이 애니메이션을 실행합니다.

 

📌 시작해보기

.element {
    animation-name: 애니메이션이름;
    animation-duration: 지속시간;
    animation-delay: 딜레이시간;
    animation-direction: 재생방향;
    animation-iteration-count: 재생횟수;
    animation-play-state: 재생상태;
    animation-timing-function: 재생속도;
    animation-fill-mode: 재생전후처리;
}
    
/* 단축 속성 */
.element {
	animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}

 

📌 @keyframes

• from 부터 to 또는 0% 부터 100%까지 각 프레임마다 설정한 스타일로 점차 바뀌면서 애니메이션이 재생되도록 정의합니다.
• from ~ to 사이에 0% ~ 100% 를 사용해 중간 프레임을 추가할 수 있습니다.

@keyframes 애니메이션이름 {
    from {
    	적용할 스타일;
    }
    to {
    	적용할 스타일;
    }
}

@keyframes 애니메이션이름 {
    0% {
    	적용할 스타일;
    }
    25% {
    	적용할 스타일;
    }
    50% {
    	적용할 스타일;
    }
    75% {
    	적용할 스타일;
    }
    100% {
    	적용할 스타일;
    }
}

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 animation-name

• @keyframes 속성에서 설정한 애니메이션의 이름으로 이를 정의하고 애니메이션을 재생할 수 있습니다.
  • 유효한 이름
    1. 문자열로 시작하는 이름 : name
    2. 언더바로 시작하는 이름 : _name
    3. 하이픈으로 시작하는 이름 : -name
  • 유효하지 않은 이름
    1. 숫자로 시작하는 이름 : 1name
    2. 특수문자로 시작하는 이름 : @name

 

📌 animation-duration

• 애니메이션이 한 번 재생하는데 걸리는 시간을 설정합니다.
• duration이 0이나 음수인 경우엔 재생되지 않습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 animation-delay

• 애니메이션이 재생되기 전까지 지연 시간을 설정합니다.
  • 0 : 기본값으로 지연 없이 바로 재생됩니다.
  • now : 0과 같이 지연 없이 바로 재생됩니다.
  • -1s : 1초가 지난 뒤 장면부터 재생됩니다.
  • 1s : 1초의 지연 시간 뒤에 재생됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 animation-direction

• 애니메이션의 재생 방향을 지정합니다.
  • normal : 기본값으로 from 부터 to 방향인 순방향으로 재생합니다.
  • alternate : from 부터 to 방향인 순방향으로 시작해 역방향과 번갈아 가며 방향을 바꿔가며 재생합니다.
  • reverse : to 부터 from 방향인 역방향으로 재생합니다. 
  • alternate-reverse : to 부터 from 방향인 역방향으로 시작해 순방향과 번갈아가며 방향을 바꿔가며 재생합니다.
• 재생 방향에 따라 animation-timing-function 효과도 반대로 적용됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 animation-iteration-count

• 애니메이션을 재생하는 횟수를 정의합니다.
  • 2 : 지정한 횟수만큼 애니메이션을 재생합니다.
  • 1.3 : 애니메이션을 한 번 재생한 후 3/10 프레임까지만 재생하고 끝납니다.
  • infinite : 애니메이션을 무한으로 재생합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 animation-play-state

• 애니메이션의 재생 여부를 정의합니다.
  • running : 기본값으로 애니메이션을 재생합니다.
  • paused : 애니메이션을 정지합니다.

 

📌 animation-timimg-function

• transition-timimg-function과 같이 애니메이션의 시간당 속도를 설정합니다.
  • linear : 처음부터 끝까지 일정한 속도로 진행됩니다.
  • ease : 기본값으로 전환 효과가 천천히 시작되어 그 다음에는 빨라지고 마지막에는 다시 느려집니다.
  • ease-in : 천천히 시작됩니다.
  • ease-out : 천천히 끝납니다.
  • ease-in-out : 천천히 시작되어 천천히 끝납니다.
  • cubic-bezier : 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📄 참고

https://webclub.tistory.com/621

https://www.yalco.kr/@html-css-scoop/4-10/

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://www.lambdatest.com/blog/css-animations-tutorial/