Front-end/CSS3
13. Animation
JUTABI
2020. 6. 6. 16:01
/*일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을
제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript 를 사용하는 것이 나을 수도 있다. jQuery 등의
애니메이션 기능은 CSS 보다 간편하게 애니메이션 효과를 가능케 한다.*/
/*비교적 작은 효과나 CSS 만으로도 충분한 효과를 볼 수 있는 것은 CSS 를 사용한다. 예를 들어 요소의 width 변경
애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.*/
/*세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과
같은 고급 효과는 자바스크립트가 훨씬 유용하다.*/
/*프로퍼티 설명 기본값*/
/*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 모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax)*/
/*@keyframes*/
div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* @keyframes rule */
@keyframes move {
/*move: 애니메이션을 대표하는 임의의 이름*/
/*from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의*/
/*정지 상태에서 오른쪽으로 300px 이동하는 애니메이션*/
/* keyframe */
from {
left: 0;
}
/* keyframe */
to {
left: 300px;
}
/*from, to 키워드 대신 %를 사용할 수 있다. 시작과 끝 키프레임 사이에 % 단위로 키프레임을 삽입 가능.*/
0% { left: 0; }
50% { left: 100px; }
100% { left: 300px; }
}
/*animation-name*/
/*이 이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule 을 선택한다.*/
/*하나 이상의 애니메이션 이름을 지정할 수 있다.*/
div {
position: absolute;
width: 100px;
height: 100px;
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: 5s;*/
/*animation-delay*/
/*요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간, 초단위 지정*/
/*animation-delay: 2s;*/
/*animation-iteration-count*/
/*애니메이션 주기의 재생 횟수 지정. 기본값은 1, infinite 로 무한반복 가능.*/
/*animation-iteration-count: 3;*/
/*animation-direction*/
/*애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.*/
/*프로퍼티값 설명*/
/*normal 기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.*/
/*reverse to 에서 from 방향으로 진행한다.*/
/*alternate 홀수번째는 normal 로, 짝수번째는 reverse 로 진행한다.*/
/*alternate-reverse 홀수번째는 reverse 로, 짝수번째는 normal 로 진행한다.*/
/*animation-fill-mode*/
/*애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정*/
/*프로퍼티값 상태 설명*/
/*none 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.*/
/* 종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.*/
/*forwards 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.*/
/* 종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.*/
/*backwards 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.*/
/* 종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.*/
/*both 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.*/
/* 종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.*/
/*animation-play-state*/
/*애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running 이다.*/
div:hover {
background: blue;
animation-play-state: paused;
}
div:active {
background: yellow;
animation-play-state: running;
}
/*animation*/
/*animation: name duration timing-function delay iteration-count direction fill-mode play-state*/
/*animation-duration 은 반드시 지정. 지정하지 않는 경우 기본값 0이 셋팅. 어떠한 애니메이션도 실행되지 않는다.
기본값은 아래와 같다.*/
/*none 0 ease 0 1 normal none running*/