CSS 애니메이션

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. 그 중에서 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있습니다.

@keyframes

키 프레임 활용 방법

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

이 키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 붙이면 사용할 수 있다. 그런데 키프레임을 사용하기 위해서는 애니메이션 이름 외에도 다양한 속성을 작성해줘야 한다.

animation 속성

animation 에 전달해줄 수 있는 속성들은 다음과 같습니다.

• animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
  • animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
  • animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
  • animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
  • animation-direction : 애니메이션 재생 방향을 지정
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  • animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
  • animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

캔버스(Canvas)

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있습니다.

캔버스 사용법

캔버스 태그를 작성하고 DOM으로 조작하기 위해 id를 작성함.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다.
</canvas>

const canvas = document.querySelector("#canvas");

캔버스를 다루기 전, 너비와 높이를 설정해주어야 한다. 기본값은 300px * 150px이다. 설정 방법은 두 가지가 있다.

1. 태그 속성으로 설정
   각각 width, height 속성으로 설정해줄 수 있다. 다만, 이 방법은 어떤 단위로 속성값을 설정해주든 픽셀로만 인식한다. 캔버스 요소의 width, height 속성은 픽셀 단위로만 명시해야 인식하도록 되어 있기 때문.

<canvas id="canvas" width="500" height="500"></canvas>
// 500픽셀 * 500픽셀로 설정된다.

<canvas id="canvas" width="50vw" height="40vh"></canvas>
// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정된다.

2. DOM으로 설정해주는 방법
   이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋다. 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있다.

canvas.width = 500px;
canvas.height = 500px;

canvas.width = 50vw;
canvas.height = 40vh;
// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 된다.
   
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 화면 크기에 맞춰서 설정해줄 수도 있다.