[CSS] 애니메이션(animation)
안녕하세요. 명월입니다.
이 글은 css의 애니메이션(animation)에 대한 글입니다.
css의 애니메이션은 html의 동적 요소를 만드는 style이라고 할 수 있습니다. 이전에 제가 트랜지션(transition)에 대해 설명한 적이 있습니다.
트랜지션(transition)도 css의 동적 요소를 만드는 것으로 애니메이션(animation)과 비슷한 기능을 하는 css style입니다.
차이점은 트랜지션은 정해진 css style 요소에 style이 변하는 설정에 시간(duration)과 변화 패턴을 주어서 동적으로 나타내는 것입니다.
애니메이션은 요소 변화 시간(duration)을 설정하고 그 시간 구간안에 css style를 설정하여 동적으로 변하는 것을 나타내는 것입니다.
쉽게 이야기하면 div라는 태그에 addClass를 넣거나, hover등의 style 차이를 주고 변하는 시간을 늘리는 것이 트랜지션이면 애니메이션은 div 태그에 10초의 구간을 주어서 0초에는 1번 style, 5초에는 2번 style, 10초에는 3번스타일 적용하는 설정입니다.
트랜지션은 한가지 스타일에 딜레이를 주어 설정할 수 있으면, 애니메이션은 좀 더 복합적으로 스타일 적용이 가능하다는 특징이 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.box {
/* 너비를 변경할 수 있는 display 설정 */
display: inline-block;
/* animation keyframes 설정 이름 */
animation-name: test-animation;
/* animation 총 구간 길이 시간 3초 */
animation-duration: 3s;
/* 딜레이 시간 (1초 뒤에 animation 실행) */
animation-delay: 1s;
/* animation 변화 패턴 */
animation-timing-function: linear;
/* animation이 끝났을 때 최종 형태 */
animation-fill-mode: both;
/* animation 반복 횟수 */
animation-iteration-count: infinite;
/* animation 방향*/
animation-direction: reverse;
}
div.box:hover {
/* animation 실행 상태 설정 */
animation-play-state: paused;
}
@keyframes test-animation {
/* 0% 구간, 총 구간 10초라 가정했을 때 0초 구간*/
0%
{
/* 너비는 0% */
min-width: 0%;
/* 요소 바탕 색을 빨간색 */
background-color: red;
}
/* 50% 구간, 총 구간 10초라 가정했을 때 5초 구간*/
50%
{
/* 너비는 50% */
min-width: 50%;
/* 요소 바탕 색을 파란색 */
background-color: blue;
/* 글자 색은 흰색 */
color: white;
}
/* 100% 구간, 총 구간 10초라 가정했을 때 10초 구간*/
100%
{
/* 너비는 100% */
min-width: 100%;
/* 요소 바탕 색을 파란색 */
background-color: green;
/* 글자 색은 흰색 */
color: white;
}
}
</style>
</head>
<body>
<div class="box">
안녕하세요.명월입니다.
</div>
</body>
</html>
안녕하세요.명월입니다.
먼저 animation-name은 keyframes으로 선언한 animation 타입 이름입니다. animation 스타일을 여러개 설정해서 이 animation-name으로 선택 사용할 수 있습니다.
animation-duration와 animation-delay, animation-timing-function 설정은 트랜지션(transition)에서도 있었던 옵션입니다.
animation-timing-function의 종류로는 ease-out는 처음에는 느리고 빠르게 변환하는 타입, ease-in는 처음에는 빠르고 느려지게 변환하는 타입, ease-in-out은 빠르고 느려지고 다시 빨리지는 타입, linear는 일정한 속도로 변환하는 타입이 있습니다.
cubic-bezier (n, n, n, n)의 설정으로 사용자가 설정 패턴 변화를 직접 설정할 수 있습니다.
참조 - https://cubic-bezier.com/
animation-fill-mode의 옵션은 animation이 끝났을 때 최종 형태입니다. both와 none이 있는데 none은 animation이 끝나면 설정이 어떤 것도 되지 않는 설정입니다. both는 최종 형태로 스타일이 적용되는 설정입니다.
animation-iteration-count는 숫자(0~)를 설정하면 그 숫자만큼 애니메이션이 반복하는 것입니다. infinite 설정은 끝없이 반복합니다. 저의 경우는 animation-iteration-count를 infinite 설정했기 때문에 animation-fill-mode의 옵션은 의미가 없습니다.
animation-direction는 animation의 방향 설정인데 normal를 설정하면 0%에서 100%로 실행되고 reverse를 설정하면 100%에서 0%로 실행됩니다.
저는 reverse를 했기 때문에 거꾸로 움직이겠네요.
마지막으로 hover에 animation-play-state를 설정했는데 값은 running과 paused가 있습니다.
running은 animation을 실행하는 옵션이고 paused는 animation를 정지하는 옵션입니다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
/* animation 설정 4 (1초 기준, 0.1초부터 보이기 시작해서 0.3초에 완전히 보임) */
@keyframes uil-battery-demo-anim4 {
0% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준 0.1부터 보이기 시작함*/
10% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준, 0.3초에 완전히 보임*/
30% {
/* 투명도가 1, 즉, 보임*/
opacity: 1;
}
}
/* animation 설정 3 (1초 기준, 0.3초부터 보이기 시작해서 0.5초에 완전히 보임) */
@keyframes uil-battery-demo-anim3 {
0% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준 0.3부터 보이기 시작함*/
30% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준, 0.5초에 완전히 보임*/
50% {
/* 투명도가 1, 즉, 보임*/
opacity: 1;
}
}
/* animation 설정 2 (1초 기준, 0.5초부터 보이기 시작해서 0.7초에 완전히 보임) */
@keyframes uil-battery-demo-anim2 {
0% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준 0.5부터 보이기 시작함*/
50% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준, 0.7초에 완전히 보임*/
70% {
/* 투명도가 1, 즉, 보임*/
opacity: 1;
}
}
/* animation 설정 1 (1초 기준, 0.7초부터 보이기 시작해서 0.9초에 완전히 보임) */
@keyframes uil-battery-demo-anim1 {
0% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준 0.7부터 보이기 시작함*/
70% {
/* 투명도가 0, 즉, 보이지 않음*/
opacity: 0;
}
/* 1초 기준, 0.9초에 완전히 보임*/
90% {
/* 투명도가 1, 즉, 보임*/
opacity: 1;
}
}
/* 배터리 스타일의 껍데기 */
.uil-battery-demo-css .outer {
/* 설정을 상대 설정 */
position: relative;
/* 너비를 80px */
width: 80px;
/* 테두리 굵기 13px에 녹색 계열 */
border: 13px solid #0d8c30;
/* 높이는 120px */
height: 120px;
/* 높이 50px (position이 relative라 상위 태그 기준)*/
top: 50px;
/* 좌로 20px (position이 relative라 상위 태그 기준)*/
left: 20px;
/* 테두리의 꼭지점 설정 */
border-radius: 10px;
}
/* 배터리 스타일의 돌기 부분 */
.uil-battery-demo-css .outer:after {
/* border가 필요할 뿐. */
content: " ";
/* display는 block 형태 */
display: block;
/* 위치는 absolute */
position: absolute;
/* 본 style이 relative라 .outer 기준 */
top: -33px;
/* 좌로는 0px */
left: 0px;
/* 너비는 80px 보다 작다*/
width: 52px;
/* 높이도 적당히 */
height: 32px;
/* 테두리 꼭지점 설정 */
border-radius: 10px;
/* 색은 녹색 계열 */
background: #0d8c30;
}
/* 배터리 스타일 내용물 */
.uil-battery-demo-css .inner {
/* 설정을 상대 설정 */
position: relative;
/* 너비는 80px보다 작아야지 */
width: 45px;
/* 높이 */
height: 19px;
/* 배터리 너비가 80px 테두리가 13px * 2, 54px 남은 것중 8px * 2씩 여백주고 남은 것 */
left: 38px;
/* 색은 하늘색 계열 */
background: #00f1ff;
}
/* 내용물 가장 위쪽 스타일*/
.uil-battery-demo-css .inner:nth-of-type(2) {
top: -53px;
/* 1초 기준, 0.7초부터 보이기 시작해서 0.9초에 완전히 보임 */
animation: uil-battery-demo-anim1 1.5s linear infinite;
}
/* 내용물 두번째 스타일*/
.uil-battery-demo-css .inner:nth-of-type(3) {
top: -50px;
/* 1초 기준, 0.5초부터 보이기 시작해서 0.7초에 완전히 보임 */
animation: uil-battery-demo-anim2 1.5s linear infinite;
}
/* 내용물 세번째 스타일*/
.uil-battery-demo-css .inner:nth-of-type(4) {
top: -47px;
/* 1초 기준, 0.3초부터 보이기 시작해서 0.5초에 완전히 보임 */
animation: uil-battery-demo-anim3 1.5s linear infinite;
}
/* 내용물 네번째 스타일*/
.uil-battery-demo-css .inner:nth-of-type(5) {
top: -44px;
/* 1초 기준, 0.1초부터 보이기 시작해서 0.3초에 완전히 보임 */
animation: uil-battery-demo-anim4 1.5s linear infinite;
}
/* 스타일을 나타낼 div 태그 */
.uil-battery-demo-css{
display: inline-block;
}
</style>
<!-- 스타일을 나타낼 div 태그 -->
<div class='uil-battery-demo-css'>
<!-- 배터리 껍데기 -->
<div class="outer"></div>
<!-- 배터리 첫번째 내용물 -->
<div class="inner"></div>
<!-- 배터리 두번째 내용물 -->
<div class="inner"></div>
<!-- 배터리 세번째 내용물 -->
<div class="inner"></div>
<!-- 배터리 네번째 내용물 -->
<div class="inner"></div>
</div>
</body>
</html>
여기까지 css의 애니메이션(animation)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.