[CSS] Transform / Transition / Animation으로 애니메이션 주기

zzzdawn45·2025년 7월 24일
CSS

CSS

목록 보기
4/8
post-thumbnail

01 CSS Transition

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 예를 들어 요소에 마우스를 올렸을때, 스타일이 변화가 즉각 반영되는 대신, 자연스럽게 전환되도록 만들고 싶을때 사용한다

Transition 속성

속성설명
transition모든 transition 속성을 이용한 스타일을 한줄에 설정
transition-property요소에 추가할 전환 효과를 설정
transition-duration전환 효과가 지속될 시간을 설정
transition-timing-function전환 효과의 시간당 속도를 설정함
transition-delay전환 효과가 나타나기 전까지의 지연시간을 설정

transition-property

트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 지정하지 않은 경우 모든 프로퍼티가 트랜지션의 대상이 된다

<body>
  <div></div>
</body>

<style>
  div {
    width: 100px;
    height: 50px;
    background-color: red;
    margin-bottom: 10px;

    /* 어떤 CSS 프로퍼티를 transition할지 지정 */
    transition-property: width, background-color; 
    transition-duration: 2s, 2s;
  }
  div:hover{
    width: 300px;
    background-color: blue;
  }
</style>

주의해야 할 사항은 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다는 것이다. 예를 들어 width font-size background-color 등은 하나의 범주안에서 크기나 색상의 값이 변화가 가능하지만 display 프로퍼티는 그렇지 않다

따라서 트랜지션의 대상이 될 수 있는 CSS 프로퍼티는 다음과 같다

[Box model]

  • width height max-width max-height min-width min-height
  • padding margin
  • border-color border-width border-spacing

[Background]

  • background-color background-position

[좌표]

  • top left right bottom

[텍스트]

  • color font-size font-weight letter-spacing line-height
  • text-indent text-shadow vertical-align word-spacing

[기타]

  • opacity outline-color outline-offset outline-width
  • visibility z-index

transition-duration

트랜지션에 일어나는 지속시간을 초단위 또는 밀리 초단위로 지정한다. 프로퍼티값을 지정하지 않을 경우 기본값 0s가 적용되어 어떠한 트랜지션 효과도 볼 수 없다

transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다

div {
	transition-property: width; 
	transition-duration: 2s;
}
div:hover{
	width: 300px;
	background-color: blue;
}

div {
	transition-property: width, opacity; 
	transition-duration: 2s, 4s;
}
div:hover{
	width: 300px;
	opacity: 0.2;
}

위 코드를 다음과 같이 축약 표현으로 나타낼 수 있다

div {
	transition: width 2s, opacity 4s; 
}
div:hover{
	width: 300px;
	opacity: 0.2;
}

transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다

대부분의 타이밍 함수는 큐빅 베이지어를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
프로퍼티값효과
ease기본값. 느리게 시작하여 점점 빨라졌다가 느려지면서 종료한다
linear시작부터 종료까지 등속 운동을 한다
ease-in느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다
ease-out일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다
ease-in-outease와 비슷하게 느리게 시작하여 느려지면서 종료한다

transition-delay

트랜지션 발동 대시 시간. 시간을 초단위 또는 밀리 초 단위로 지정한다

프로퍼티의 값이 변화하여도 즉시 트랜지션이 실행되지 않고, 일정 시간 대기 한 후 트랜지션이 실행되도록 한다

transition-delay : 3s;

transition

모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand이다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다

단, transition-duration은 반드시 지정해야 한다. 지정하지 않은 경우 기본값 0이 세팅되어 어떠한 트랜지션도 실행되지 않는다

transition: property duration function delay
  기본값      all      0        ease     0
/* duration */
transition: 1s

/* property duration */
transition: width 1s

/* duration function */
transition: 1s ease-in;

/* duration delay*/
transition: 1s 1s;

/* property duration function delay */
transition: width 1s ease-in 1s;

02 CSS Transform

트랜스폼(Transform)은 요소에 이동, 회전, 확대/축소, 비틀기 효과를 부여해준다. 단, transform 속성은 별도의 애니메이션 없이 즉시 화면에 밤영되므로, 부드러운 전환을 위해서는 transition과 함께 사용해야 한다

2D Transform

기본 x,y 두 좌표로만 요소를 변화시켜 2D적인 변화를 가미할 수 있다

Transform function설명단위
translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다px, %, em 등
translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다px, %, em 등
translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다px, %, em 등
scale(x,y)요소의 크기를 X축으로 x배, Y축으로 y배 확대/축소 시킨다0과 양수
scaleX(n)요소의 크기를 X축으로 x배 확대/축소 시킨다0과 양수
scaleY(n)요소의 크기를 Y축으로 y배 확대/축소 시킨다0과 양수
skew(x-angle,y-angle)요소를 X축으로 x 각도만큼, Y축으로로 y 각도만큼 기울인다+/- 각도
skewX(x-angle)요소를 X축으로 x 각도만큼 기울인다+/- 각도
skewY(y-angle)요소를 Y축으로 y 각도만큼 기울인다+/- 각도
rotate(angle)요소를 angle만큼 회전시킨다+/- 각도

3D Transform

x,y,z 세 좌표를 이용해 요소를 변화시켜 3D적인 변화를 가미할 수 있다

Transform function설명단위
translate3d(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼,Z축으로 z만큼 이동시킨다px, %, em 등
translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다px, %, em 등
translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다px, %, em 등
translateZ(n)요소의 위치를 Z축으로 z만큼 이동시킨다px, %, em 등
scale3d(x,y)요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대/축소 시킨다0과 양수
scaleX(n)요소의 크기를 X축으로 x배 확대/축소 시킨다0과 양수
scaleY(n)요소의 크기를 Y축으로 y배 확대/축소 시킨다0과 양수
scaleZ(n)요소의 크기를 Z축으로 z배 확대/축소 시킨다0과 양수
rotate3d(x,y,z)요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다+/- 각도
rotateX(x)요소를 X축으로 x각도 회전시킨다+/- 각도
rotateY(y)요소를 Y축으로 y각도 회전시킨다+/- 각도
rotateZ(z)요소를 Z축으로 z각도 회전시킨다+/- 각도

3D transform을 사용하는 경우, 부모 요소에 perspective 속성을 설정하면 입체감 있는 시작 효과를 만들 수 있다

transform

하나 이상의 변형 함수를 공백으로 구분해 연속 적용할 수 있으며, 적용 순서에 따라 결과가 달라질 수 있다

<body>
  <div class="box translate">translate</div>
  <div class="box rotate">rotate</div>
  <div class="box scale">scale</div>
  <div class="box skew">skew</div>
  <div class="box multiple">multiple</div>
  <div class="box origin">origin</div>
</body>

<style>
  body{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    padding: 50px;
    font-family: sans-serif;
    background: #f9f9f9;
  }
  .box {
    width: 100px;
    height: 100px;
    background: #4caf50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    border-radius: 10px;
    text-align: center;
  }

  .box:hover{
    cursor: pointer;
  }

  .translate:hover {
    transform: translate(50px,20px);
  }
  .rotate:hover {
    transform: rotate(45deg);
  }
  .scale:hover {
    transform: scale(1.5);
  }
  .skew:hover {
    transform: skew(20deg,10deg);
  }
  .multiple:hover{
    transform: translateX(20px) rotate(30deg) scale(1.2);
  }
</style>

transform-origin

요소의 기본 기준점을 설정할때 사용된다. 기본 기준점은 요소의 정중앙이다(50%, 50%)

설정값으로 %, px, top left, bottom right을 사용할 수 있다. 0, 0은 top left / 100% 100%는 bottom right과 같은 값이다.

<body>
  <div class="box center">center</div>
  <div class="box topleft">topleft</div>
  <div class="box buttomright">buttomright</div>
</body>

<style>
  body{
    display: flex;
    gap: 100px;
    height: 100vh;
    justify-content: center;
    font-family: sans-serif;
    background: #f9f9f9;
    align-items: center;
  }
  .box {
    width: 100px;
    height: 100px;
    background: #4caf50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .center:hover{
    transform: rotate(45deg);
    transform-origin: center center;  /* 기본값 */
  }
  .topleft:hover {
    transform: rotate(45deg);
    transform-origin: top left; 
  }
  .buttomright:hover {
    transform: rotate(45deg);
    transform-origin: buttom right;  
  }
</style>

03 CSS Animation

애니메이션 속성은 말 그대로 html 요소에 애니메이션 효과를 적용시켜준다. 애니메이션을 적용하기 위해선 @keyframes 이라는 특별한 속성이 쓰여진다. 하나의 줄거리(keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다

transition과 비슷하지만, 비교하여 다른 점은 다음과 같다

  • 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다
  • animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다

Animation 속성

프로퍼티설명기본값
animation-name@keyframes 애니메이션 이름을 지정한다
animation-duration한 사이클에 소요되는 시간 단위를 초/밀리초 단위로 지정0s
animation-timing-function애니메이션 효과를 위한 타이밍 함수를 지정한다ease
animation-delay요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초/밀리초 단위로 지정0s
animation-iteration-count애니메이션 재생 횟수를 지정한다1
animation-direction애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다normal
animation-fill-mode애니메이션 미실행 시 요소 스타일 지정
animation-play-state애니메이션 재생 상태를 지정한다running
animation모든 애니메이션 프로퍼티를 한번에 지정한다

@keyframes

CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다. 이 룰을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다

@keyframes rule은 시간의 흐름에 따라 애니메이션을 정의한다. 여러개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다. from-to 또는 0% ~ 100% 형식으로 정의한다

@keyframes move {   
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}
/* from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의하였다. 애니메이션의 시작 시점을 의미하는 from 키프레임 내에는 left 프로퍼티에 값 0을, 애니메이션의 끝 시점을 의미하는 to 키프레임 내에는 left 프로퍼티에 값 300px을 지정하였다. 그 결과, 정지 상태에서 오른쪽으로 300px 이동하는 애니메이션이 실행된다. */
@keyframes move {   
	from {
		left: 0;
	}
	to {
		left: 300px;
	}
}
  
div {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
  
	animation-name: move;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

from to 키워드 대신 좀 더 상세한 조작을 위해 퍼센티지도 사용할 수 있다

@keyframes move {   
	0% {left: 0;}
	50% {left: 100px;}
	100% {left: 300px;}
}

animation-name

이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다. 하나 이상의 애니메이션 이름을 지정할 수 있다

@keyframes 뒤에 애니메이션을 대표하는 임의의 이름을 부여하여 그것을 어느 요소에 등록할지 정하는 것으로 보면 된다

div {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
  
	animation-name: move, fadeOut, changeColor;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes move {   
	from {
		left: 0;
	}
	to {
		left: 300px;
	}
}

@keyframes fadeOut{
	from{
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes changeColor{
	from{
		background-color: red;
	}
	to {
		background-color: blue;
	}
}

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위 또는 밀리 초 단위로 지정한다. animation-duration은 반드시 지정해야 한다. 지정하지 않은 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다

animation-duration: .5s;
animation-duration: 500ms;

animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정한다

animation-delay

애니메이션 실행 대기 시간

animation-delay: 2s

animation-iteration-count

애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복할 수 있다

animation-iteration-count : 3;

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다

프로퍼티값설명
normal기본값으로 from(0%)에서 to(100%) 방향으로 진행한다
reverseto에서 from 방향으로 진행한다
alternate홀수번째는 normal, 짝수번째는 reverse로 진행한다
alternate-reverse홀수번째는 reverse, 짝수번째는 normal로 진행한다
<div></div>

<style>
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;

    animation: myAnimation 5s infinite;
    animation-direction: alternate;
  }

  @keyframes myAnimation{
    0% { background: red; left: 0px; top: 0px;}
    25% { background: yellow; left: 200px; top: 0px;}
    50% { background: blue; left: 200px; top: 200px;}
    75% { background: green; left: 0px; top: 200px;}
    100% { background: red; left: 0px; top: 0px;}
  }
</style>

animation-fill-mode

애니메이션 미실행 시(대기, 종료) 요소의 스타일 지정한다

프로퍼티값상태설명
none대기시작 프레임에 설정한 스타일을 적용하지 않고 대기
종료애니메이션 실행전 상태로 요소의 프로퍼티값을 되돌리고 종료
forwards대기시작 프레임에 설정한 스타일을 적용하지 않고 대기
종료종료 프레임에 설정한 스타일을 적용하고 종료
backwards대기시작 프레임에 설정한 스타일을 적용하지 않고 대기
종료애니메이션 실행 전 상태로 요소의 프로퍼티값을 되돌리고 종료
both종료시작 프레임에 설정한 스타일을 적용하지 않고 대기
대기종료 프레임에 설정한 스타일을 적용하고 종료
<body>
  <h1>animation-fill-mode</h1>

  <div class="play">none</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기</p>
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료</p>

  <div class="play">forwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료

  <div class="play">backwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료

  <div class="play">both</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
</body>

<style>
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    font: bold 1em/100px san-serif;
    text-align: center;
    position: relative;
    margin-bottom: 10px;

    animation: myAnimation 2s linear 2s;
    animation-iteration-count: 1;
    animation-play-state: running;
  }

  div.play:nth-of-type(1){
    animation-fill-mode: none;
  }
  div.play:nth-of-type(2){
    animation-fill-mode: forwards;
  }
  div.play:nth-of-type(3){
    animation-fill-mode: backwards;
  }
  div.play:nth-of-type(4){
    animation-fill-mode: both;
  }

  @keyframes myAnimation{
    0% { left: 0px; background: yellow;}
    100% { left: 200px; background: blue;}
  }
</style>

코드를 직접 실행하여 확인해보는 것도 좋다

animation-play-state

애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값을 running이다

animation-play-state : paused;
animation-play-state : running;

animation

모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다

animation은 animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state를 순서대로 축약할 수 있다

/*name duration timing-function delay */
animation: myAnimation 2s linear 2s;

출처 : https://inpa.tistory.com/entry/CSS-📚-트랜지션-트랜스폼-애니메이션

profile
zzzdawn45
이전 포스트

[CSS] overflow 속성으로 컨텐츠 보여주기

다음 포스트

[CSS] 미디어 쿼리(media query) - 반응형 웹

0개의 댓글