혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
여러개의 CSS를 부드럽게 전환할 수 있는 방법
애니메이션 중간 절차 제어표현 -> 지속 시간 기준
키프레임 블록 -> 시작과 끝 필수
/* % 로 표기한 경우*/
@keyframes 애니메이션이름 {
0%{ /* css 내용 */ }
50%{ /* css 내용 */ }
100%{ /* css 내용 */ }
}
/* from , to 로 표기한 경우*/
@keyframes 애니메이션이름 {
from { /* css 내용 */ }
50%{ /* css 내용 */ }
to{ /* css 내용 */ }
}
animation
: 한번에 아래 속성을 나열할 수 있음 animation: 3s ease-in 1s 2 reverse both paused slidein;
/*
순서 참고
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
*/
animation-name
: 요소에 적용할 애니메이션으로 @keyframes에 적용된 명칭animation-duration
: 한 사이클의 재생 시간(필수 지정)animation-timing-function
: 진행되는 속도 설정animation-delay
: 애니메이션의 시작을 지연시킬 시간 지정animation-iteration-count
: 반복 횟수 지정animation-direction
: 애니메이션 재생 방향을 지정animation-fill-mode
: 재생 전 후의 상태 설정animation-play-state
: 멈추거나 실행시키는 속성요소에 적용할 애니메이션 지정
@keyframes lotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
to { transform: rotate(360deg); }
}
animation-name: lotate;
/* animation : lotate; 한줄 작성할 때 첫번째로 적용 */
animation-duration: 2s;
한 사이클의 재생 시간
animation-duration: 2s;
진행되는 속도 관련하여 설정
**
애니메이션의 반복 횟수 지정
기본 값은 1회
e.g. animation-iteration-count: 3;
infinite
로 무한반복 설정
e.g. animation-iteration-count: infinite;
cf. 소수점으로 지정하면 재생시간대비 소수점만큼만 진행하고 초기 상태로 돌아간다.
애니메이션 재생 방향 설정
e.g. animation-direction: alternate;
normal
: 재시작은 처음 상태부터 시작reverse
: 역방향 재생으로 재시작할 때 끝난 상태에서 초기 상태로 재생alternate
: 정방향, 역방향을 번갈아 가면서 재생alternate-reverse
: 역방향, 정방향 순으로 재생**
실행 전, 후 상태를 설정
none
: 기본 상태forwards
: 재생중이 아닌 경우 마지막 키프레임 스타일을 유지backwards
: 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지both
: 재생 전에는 첫 번째 키프레임, 재생 후에는 마지막 키프레임 스타일을 유지재생을 멈추거나 실행
animation-play-state: paused;
, animation-play-state: running;
/* id가 'logo'인 요소에 lotate 애니메이션 적용*/
@keyframes lotate {
0% { transform: rotate(0deg); }
80% { transform: rotate(180deg); }
to { transform: rotate(360deg); }
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-iteration-count : infinite;
animation-timing-function : linear;
/* animation : lotate 3s infinite linear; 동일한 표현*/
}
@keyframes ball {
0% {
top: 0px;
background-color: #fff;
}
95% {
width: 100px;
background-color: blueviolet;
}
to {
top: 300px;
width: 115px;
height: 90px;
background-color: rgb(60, 1, 109);
}
}
div {
position: relative;
left: 200px;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
animation: ball 1s ease-in Infinite Alternate;
}
<canvas>
태그와 javascript의 조합(DOM 조작)으로 그래픽 요소를 표현
MDN 캔버스 튜토리얼
W3school 캔버스 속성, 메서드
e.g. 애니메이션, 데이터 시각화, 웹 게임 개발 등
width
, height
canvas.getContext()
의 전달인자에 따라 2D, 3D 표현 가능canvas.getContext('2d')
-> 2차원 그래픽 적용<canvas>
태그를 html에 추가
<canvas id="canvas"></canvas>
DOM을 조작하여 캔버스의 너비를 지정
vh
등으로 적용해도 px
로 인식한다. 사이즈를 지정하지 않으면 디폴트값인 가로 300px, 세로 150px이 적용된다.const canvas = document.querySeletor('#canvas');
canvas.width = 500;
canvas.height = 500; // 단위없이 사이즈 지정
/* 화면 크기에 맞워 설정 */
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
// 태그에서 지정 : <canvas id="canvas" width="500" height="500"></canvas>
2D 그래픽 적용
const ctx = canvas.getContext('2d');
선언한 ctx를 활용하여 그래픽 요소 생성
fillStyle
속성ctx.fillStyle = 'blueviolet';
fillRect
메서드ctx.fillRect(30, 30, 100, 100);
//전달 인자 순서 : x좌표, y좌표, 가로길이, 세로길이
lineWidth
속성ctx.strokeStyle
속성ctx.lineWidth = 5;
ctx.strokeStyle = 'lime';
strokeRect
메서드ctx.strokeRect(50, 50, 100, 100);
//전달 인자 순서 : x좌표, y좌표, 가로길이, 세로길이
clearRect
메서드 -> 투명도 조절ctx.clearRect(50, 50, 100, 100);
const canvas = document.querySelector("#canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
// console.log(canvas);
ctx.fillStyle = "blueviolet";
ctx.fillRect(30, 30, 100, 100);
ctx.lineWidth = 5;
ctx.strokeStyle = "lime";
ctx.strokeRect(50, 50, 100, 100);
function clear() {
ctx.clearRect(50, 50, 100, 100);
}
const btn = document.querySelector("#remove");
btn.onclick = clear;
event.offsetX
, event.offsetY
event.clientX-ctx.canvas.offsetLeft
, event.clientY-ctx.canvas.offsetTop
event.clientX
, event.clientY
ctx.canvas.offsetLeft
, ctx.canvas.offsetTop
/* 캔버스 정의 */
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.style.backgroundColor = "lightgray";
canvas.width = 300;
canvas.height = 400;
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
/* 이벤트 요소 */
ctx.fillStyle = "blueviolet";
ctx.strokeStyle = "black";
canvas.onclick = function (event) {
const x = event.offsetX;
const y = event.offsetY;
// const x = event.clientX - ctx.canvas.offsetLeft;
// const y = event.clientY - ctx.canvas.offsetTop;
ctx.fillRect(x - 15, y - 15, 30, 30);
ctx.strokeRect(x - 15, y - 15, 30, 30);
};
Chapter1. 브라우저
Chapter2. 브라우저 렌더링
Chapter3. 반응형 웹
Chapter4. CSS 애니메이션
Chapter5. Canvas(캔버스)
과제 1 - 반응형 웹 만들기
과제 2 - CSS 애니메이션과 Canvas 활용하기
이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.
오늘 학습이 어려웠다면(0~15개)
오늘 학습이 수월했다면(15~20개)
추가적인 학습을 하고 싶다면(20~25개)