개발 공부/HTML , CSS

[CSS] - 트랜지션과 애니메이션

징_ 2023. 12. 19. 11:57

* 변형 

- transform과 변형함수

  • 변형(transform, 트랜스폼) : 특정 요소의 크기나 형태 등 스타일이 바뀌느느 것
  • 기본형
transform: 함수

 

  > 2차원 변형

  • 수평이나 수직으로 웹 요소 변형
  • 크기나 각도만 지정하면 됨
  • 2차원 좌표 사용
  • 종류

 

  > 3차원 변형

  • x축과 y축에 원근감 추가
  • z축은 앞뒤로 이동 (보는 사람 쪽으로 다가올 수록 값이 더 커짐)
  • 종류

 

 

 

 

- 웹 요소를 이동시키는 translate() 함수

  • 지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동
  • 기본형
transform: translate(tx, ty)
transform: translate3d(tx, ty, tz)
transform: translateX(tx)
transform: translateY(ty)
transform: translateZ(tz)

 

  • transform: translate(tx, ty) - x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동 (ty 값 주어지지 않으면 0으로 간주)
  • transform: translate3d(tx, ty, tz) - x축 방향으로 tx만큼, y축 방향으로 ty만큼, z축 방향(앞뒤)로 tz만큼 이동
  • transform: translateX(tx) - x축 방향으로 tx만큼 이동
  • transform: translateY(ty) - y축 방향으로 ty만큼 이동
  • transform: translateZ(tz) - z축 방향으로 tz만큼 이동

 

 

<예시> 

...
  #movex:hover { transform: translateX(50px); } /* x축으로 50px 이동 */
  #movey:hover { transform: translateY(20px); } /* y축으로 20px 이동 */
  #movexy:hover { transform: translate(10px, 20px); } /* x축으로 10px, y축으로 20px 이동 */
</style>
...

 

 

 

 

 

- 요소를 확대/축소하는 scale() 함수

  • 지정한 크기만큼 요소를 확대/축소
  • 기본형
transform: scale(sx, sy)
transform: scale3d(sx, sy, sz)
transform: scaleX(sx)
transform: scaleY(sy)
transform: scaleZ(sz)

 

  • transform:scale(sx, sy) - x축 방향으로 sx만큼, y축 방향으로 sy만큼 확대. sy 값이 주어지지 않는다면 sx 값과 같다고 간주. 예) scale(2.0)는 scale(2,2)와 같은 함수이며 요소를 두 배로 확대.
  • transform:scale3d(sx, sy, sz) - x축 방향으로 sx만큼, y축 방향으로 sy만큼, z축 방향으로 sz만큼 확대. 
  • transform:scaleX(sx) – x축 방향으로 sx만큼 확대.
  • transform:scaleY(sy) - y축 방향으로 sy만큼 확대.
  • transform:scaleZ(sz) -z축 방향으로 sz만큼 확대

 

<예시>

...
<style>
  #scalex { transform: scaleX(2); }		/* x축으로 2배 확대 */
  #scaley { transform: scaleY(1, 5); }	/* y축으로 1.5배 확대 */
  #scale { transform: scale(0.7); }		/* x, y축으로 0.7배 확대 */
</style>
...

 

 

 

 

 

 

- 요소를 회전시키는 rotate() 함수

  • 각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전
  • 일반 각도(degree)나 레디안(radian)값 사용(1래디안=1/180˚)

 

  > 2차원 rotate() 함수

  • 기본형
transform: rotate(각도) 

 

 

 

<예시>

...
<style>
  #rotate1:hover { transform: rotate(40deg); }
  #rotate2:hover { transform: rotate(-40deg); }
</style>
...

 

 

  > 3차원 rotate() 함수

  • 기본형
transform: rotate(rx, ry, 각도)
transform: rotate3d(rx, ry, rz, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)

 

  • perspective 속성
    • 원근감을 표현하기 위해 사용하는 속성
    • 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지 나타냄
    • 값(픽셀 단위)은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐
    • perspective 속성은 변형하는 요소의 부모 요소에 정의해야 한다.

 

<예시>

- 이미지 회전하며 원근감 주기

...
  .rotatex:hover { transform: rotateX(50deg); } /* x축으로 50도 회전 */
  #pers { perspective: 300px; } /* 원근감 추가 */
</style>

...
<div class="origin">
  <div class="rotatex">
    <img src="images/sunset.jpg" alt="">
  </div>
</div>
<div class="origin" id="pers">
  <div class="rotatex">
    <img src="images/sunset.jpg" alt="">
  </div>
</div>
...

 

=> 원본 이미지  > 원근감 추가 안한 것 > 원근감 추가 한 것

 

 

- 3차원 회전

...
 .origin {
   ...
   perspective: 200px; /* 원근감 추가 */
 }
 .origin > divv {
   ...
   transition: all 3s; /* 3초동안 회전하도록 트랜지션 적용 */
 }
 #rotatex:hover { transform: rotateX(55deg); }	/* x축으로 55도 회전 */
 #rotatey:hover { transform: rotateY(55deg); }  /* y축으로 55도 회전 */
 #rotatez:hover { transform: rotateZ(55deg); }  /* z축으로 55도 회전 */
 #rotatesyz:hover { transform: rotate3d(2.5, 1.2, -1.5, 55deg); } /* x, y, z축에 방향 벡터를 지정하고 55도 회전 */
</style>
...
<div class="origin">
  <div id="rotatex"></div>
</div>
<div class="origin">
  <div id="rotatey"></div>
</div>
<div class="origin">
  <div id="rotatez"></div>
</div>
<div class="origin">
  <div id="rotatesyz"></div>
</div>
...

 

 

 

 

 

 

- 요소를 비틀어 왜곡하는 skew() 함수

  • 요소를 지정한 각도만큼 비틀어 왜곡
  • 기본형
transform: skew(x각도, y각도)
transform: skewX(x각도)
transform: skewY(y각도)

 

  • transform: skewX(ax) - x축을 따라 당김
  • transform: skewY(ax) - y축을 따라 당김
  • transform: skew(ax, ay) - 첫 번째 각도는 x축을 따라 당기는 각도 / 두번째 각도는 y축을 따라 당기는 각도 (두 번째 값이 주어지지 않으면 y축에 대한 각도를 0으로 간주)

 

<예시>

...
  #skewx:hover { transform: skewX(30deg); } /* X축 기준으로 30도 비틀기 */
  #skewy:hover { transform: skewY(15deg); } /* y축 기준으로 15도 비틀기 */
  #skewxy:hover { transform: skew(-25deg, -15deg); } /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
</style>
...

 

 

 

 

 

 

* 트랜지션

- 트랜지션이란

: 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

 

 

 

 

 

- 트랜지션과 속성

 

 

  > transition-property 속성

  • 트랜지션을 적용할 속성 선택
  • 이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨
  • 기본형
transition-property: all | none | <속성 이름>

 

<예시>

transition-property: all;	/* 해당 요소의 모든 속성에 트랜지션 적용 */
transition-property: background-color;	/* 해당 요소의 배경색에 트랜지션 적용 */
transition-property: width, height;		/* 해당 요소의 너비와 높이에 트랜지션 적용 */

 

 

 

 

 

  > transition-duration 속성

  • 트랜지션 진행 시간 지정
  • 시간 단위는 초(seconds) 또는 밀리초(milliseconds)
  • 트랜지션이 여러개라면 쉼표(,)로 구분해 진행 시간 지정
  • 기본형
transition-duration: <시간>

 

 

<예시>

...
.box {
  ...
  transition-property: width, height;	/* 트랜지션 대상 - 너비, 높이 */
  transition-duration: 2s, 1s;			/* 트랜지션 시간 - 2초, 1초 */
}
.box:hover {
  width: 200px;
  height: 120px;
 }
</style>
...

 

 

 

 

  > transition-timing-function 속성

  • 트랜지션의 시작과 중간, 끝에서의 속도 지정
  • 기본형
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

 

 

 

  > transition-delay 속성

  • 트랜지션이 언제부터 시작될지 지연 시간 지정
  • 시간 단위는 초(seconds) 또는 밀리초(milliseconds). 기본값 0
  • 기본형
transition-delay: <시간> 

 

 

 

  > transition-delay 속성

  • 트랜지션 관련 속성을 한꺼번에 지정
  • 시간 값 속성이 2개이므로 앞에 오는 시간값은 transition-duration, 뒤에 오는 시간 값은 transition-delay 속성으로 간주
  • 기본형
transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>

 

 

<예시>

...
  <style>
	.box {
		margin:50px auto;
		width: 100px;
		height: 100px;
		background-color: #fb5; /* 연주황 */
		border: 1px solid #222;
		transition: 2s ease-in;  /* 대상: all, 시간:2초, 함수:ease-in */
	}
	.box:hover {  /* 여기에 있는 속성이 모두 트랜지션 대상 */
		width: 200px;
		height: 200px;
		background-color: #f50; /* 진주황 */
		transform: rotate(270deg);			
	}
</style>
...

 

=> 마우스 올리면 사각형이 돌면서 색이 진해짐

 

 

 

 

 

* 애니메이션

- CSS 애니메이션에서 사용하는 속성

  • 웹 요소에 애니메이션 추가
  • 애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다.
  • 키프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점
  • 애니메이션 관련 속성

 

 

  > @keyframes 속성

  • 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점 설정
  • '이름'으로 애니메이셔녀 구별
  • 기본형
@keyframes <이름> {
  <선택자>  { <스타일>  }
}
  • @keyframs의 선택자에서 속성값이 바뀌는 지점을 가리킴
  • 시작 위치는 0%, 끝 위치 100%로 놓고 위치 지정
  • 시작과 끝 위치만 사용한다면 from, to 키워드 사용 가능

 

 

 

 

  > animation-name 속성

  • 어떤 애니메이션을 사용할지 구별
  • @keyframes 속성에서 만든 애니메이션 이름을 사용
  • 기본형
animation-name: <키프레임 이름> | none

 

 

 

 

 

  > animation-duration 속성

  • 애니메이션 실행 시간 설정 (기본값 0)
  • 사용 가능한 값은 초(s)나 밀리초(ms)
  • 기본형
animation-duration: <시간>

 

 

 

<예시>

...
  #box1 {
    background-color: #4cff00;		/* 연두색 박스 */
    border: 1px solid transparent;	/* 1px 투명 테두리 */
    animation-name: shape;			/* 애니메이션 지정 */
    animation-duration: 3s;			/* 애니메이션 실행 시간 */
  }
  #box2 {
    background-color: #4cff00;		/* 연두색 박스 */
    border: 1px solid transparent;	/* 1px 투명 테두리 */
    animation-name: rotate;			/* 애니메이션 지정 */
    animation-duration: 3s;			/* 애니메이션 실행 시간 */
  }
  @keyframes shape {
    from { border: 1px solid transparent; } /* 1px짜리 투명 테두리에서 */
    to {
      border: 1px solid #000;   /* 검은색 테두리로 변경 */
      border-radius: 50%;		/* 테두리를 둥글게 변경 */
    }
  }
  @keyframes rotate {
    from { transform: rotate(0deg); }	/* 0도에서 시작해서 */
    to { transform: rotate(45deg); } 	/* 45도까지 회전하기 */
  }
</style>
...
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
...

 

 

 

 

 

  > animation-direction 속성

  • 애니메이션이 끝난 후 원래 위치로 돌아가거나 반대 방향으로 실행하도록 지정
  • 기본형
animation-direction: normal | alternate

 

 

 

  > animation-iteration-count 속성

  • 애니메이션 반복 횟수 지정하기
  • 기본형
animation-iteration-count: <숫자> | infinite

 

<예시>

...
  #box1 {
    background-color: #4cff00;
    border: 1px solid transparent;
    animation-name: shape;
    animation-duratioon: 3s;
    animation-iteration-count: infinite;		/* 애니메이션 무한 반복 */
  }
  #box2 {
    background-color: #8f06b0;
    border: 1px solid transparent;
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;		/* 애니메이션 무한 반복 */
  }
  @keyframes shape {...}
  @keyframes rotate {...}
  }
</style>
...

 

 

 

 

 

  > animation-timing-function 속성

  • 애니메이션 속도 곡선 지정
  • 기본형
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

 

 

  > animation 속성

  • 여러 개의 애니메이션 속성을 하나의 속성으로 줄여서 사용
  • 지정하지 않은 속성은 기본 값 사용
  • animation-duration 속성 값은 반드시 지정

 

<예시>

...
  .box {
    width: 100px;
    height: 100px;
    margin: 60px auto;
    animation: rotate 1.5s infinite, background 1.5s infinite alternate;
  }
  
  @keyframes rotate { /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */ 
    from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
    to ( transform: persepctive(120px) rotateX(-180deg) rotateY(-180deg); }
  }
  
  @keyframes background {
    from { background-color: red; } /* 시작 배경은 빨강 */
    50% { background-color: green; } /* 중간(50%) 배경색은 초록 */
    to { background-color: blue; }  /* 마지막(100%) 배경색은 파랑 */
  }
</style>
...