Today I Learned
- @keyframes
- 캔버스
CSS 애니메이션
@keyframes
@keyframes 키워드를 사용하면 시간 진행에 따른 애니메이션을 만들 수 있다.
@keyframes 애니메이션 이름 {
0% {
/* 애니메이션 시작 할 때 css 코드 */
}
50% {
/* 50% 지점에서의 css 코드 */
}
100% {
/* 애니메이션 완료 될 때 css 코드 */
}
}
/* 시작 0도, 50%에서 180도, 완료 360도 순으로 회전*/
@keyframes lotate {
0% {
transform : rotate(0deg);
}
50% {
transform : rotate(180deg);
}
100% {
transform : rotate(360deg);
}
}키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러오면 해당 애니메이션을 사용할 수 있다. 하지만 키프레임을 사용하기 위해서는 애니메이션 이름 외에도 다양한 속성을 작성해야 한다.
animation 속성
-
animation: 띄어쓰기로 나열하면 아래의 속성들을 한번에 지정할 수 있음
-animation-name:@keyframes에서 지정한 애니메이션 이름
-animation-duration: 한 사이클의 애니메이션이 재생될 시간 지정
-animation-delay: 애니메이션의 시작을 지연시킬 시간 지정
-animation-direction: 애니메이션 재생 방향 지정
-animation-iteration-count: 애니메이션이 몇 번 반복될지 지정
-animation-play-state: 애니메이션 재생 상태 지정 (정지 또는 재생)
-animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
-animation-fill-mode: 애니메이션이 재생 전 후의 상태 지정
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes lotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
#paragraph {
animation-name: lotate;
animation-duration: 3s;
animation-delay: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
/* 아래와 같이 animate 속성으로 나열해도 됨 */
/* #paragraph {
animation: lotate 3s 3s alternate infinite;
} */
</style>
</head>
<body>
<p id="paragraph">This is my paragraph.</p>
</body>
</html>animation-name
애니메이션을 지정하고 싶은 요소에 animation 속성의 첫번째 값, 또는 animation-name 속성으로 @keyframes 키워드를 사용해 만든 애니메이션 이름을 작성한다. 최소한 animation-duration 속성과 함께 지정해줘야 애니메이션이 실행된다.
#paragraph {
animation: lotate;
}#paragraph {
animation-name: lotate;
}animation-duration
애니메이션이 재생될 시간을 animation 속성의 두번째 값, 또는 animation-duration 속성으로 시간 단위를 작성한다. 작성하지 않으면 기본값이 0으로, 애니메이션이 재생되지 않는다.
animation-duration: 6s;
animation-duration: 120ms;animation-delay
애니메이션의 재생 시작까지의 대기 시간을 animation 속성으로 나열, 또는 animation-delay 속성으로 시간 단위를 작성할 수 있다.
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;animation-direction
애니메이션의 재생 방향을 animation 속성으로 나열, 또는 animation-direction 속성으로 지정한다.
animation-direction: normal; /* 순방향 재생, 기본 값 */
animation-direction: reverse; /* 역방향 재생 */
animation-direction: alternate; /* 순방향, 역방향 번갈아 재생 */
animation-direction: alternate-reverse; /* 역방향, 순방향 번갈아 재생 */animation-iteration-count
애니메이션이 몇 번 재생될 지 animation 속성으로 나열, 또는 animation-iteration-count 속성으로 지정한다.
기본값은 1로 애니메이션이 1번 재생되고 소수점으로 지정할 경우, 재생 도중에 처음 상태로 돌아간다. infinite로 지정하면 무한 반복된다.
animation-iteration-count: 1; /* 1번 재생, 기본 값 */
animation-iteration-count: 3; /* 3번 재생 */
animation-iteration-count: 2.4; /* 2.4번 재생 */
animation-iteration-count: infinite; /* 무한 반복 */animation-play-state
애니메이션의 재생 상태를 animation 속성으로 나열, 또는 animation-play-state 속성으로 지정한다.
animation-play-state: running; /* 재생, 기본 값 */
animation-play-state: paused; /* 정지 */animation-timing-function
애니메이션의 진행 속도를 animation 속성으로 나열, 또는 animation-timing-function 속성으로 지정한다.
animation-timing-function: ease; /* 기본 값 */
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;animation-fill-mode
애니메이션의 재생 전과 후의 상태를 animation 속성으로 나열, 또는 animation-fill-mode 속성으로 지정한다.
animation-fill-mode: none; /* 기본 값 */
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;Canvas (캔버스)
HTML <canvas> 태그와 JavaScript를 사용해서 다양한 그래픽 요소를 만들 수 있다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="canvas" width="50vw" height="40vh"></canvas>
<script type="application/javascript">
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.onclick = function (event) {
const x = event.clientX - ctx.canvas.offsetLeft;
const y = event.clientY - ctx.canvas.offsetTop;
ctx.fillRect(x - 15, y - 15, 30, 30);
};
</script>
</body>
</html>