[HTML/CSS] 심화
CSS 애니메이션
CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜줍니다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있습니다.
@keyframes
키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 합니다.
/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */
@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-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
animation-direction : 애니메이션 재생 방향을 지정
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정
코드스테이츠 로고에 logo라는 아이디를 부여하고 해당 요소에 각 속성을 적용해보며 각 속성이 어떤 의미인지도 차근차근 알아봅시다.
animation-name
애니메이션을 적용하고 싶은 요소에 animation 속성의 첫번째 값으로, 혹은 animation-name 이라는 속성으로 @keyframes 키워드를 사용해서 만든 애니메이션 이름을 작성해주면 됩니다.
#logo {
animation : lotate;
}
#logo {
animation-name : lotate;
}animation-duration
애니메이션이 재생될 시간을 animation 속성의 두번째 값으로, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성해줍니다. 작성해주지 않을 경우 기본값이 0 이기 때문에 애니메이션이 재생되지 않습니다.
#logo {
animation : lotate 3s ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
}animation-delay
애니메이션 재생을 미룰 시간을 지정합니다. 역시 animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성해줍니다.
#logo {
animation : lotate 3s 3s ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-delay : 3s;
}animation-direction
애니메이션 재생 방향을 지정합니다. 역시 animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-direction 이라는 속성으로 작성해줍니다.
#logo {
animation : lotate 3s reverse ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-direction : alternate;
}normal : 기본 값. 재생이 끝나면 처음부터 다시 재생합니다.
reverse : 역방향으로 재생합니다.
alternate : 순방향부터 역방향을 번갈아가며 재생합니다.
alternate-reverse : 역방향부터 순방향을 번갈아가며 재생합니다.
animation-iteration-count
애니메이션이 몇 번 재생될지 지정합니다. 기본 값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생 됩니다. infinite 로 설정할 경우 무한 반복 되며, 소수점을 작성할 경우 재생 도중 처음 상태로 돌아갑니다. 예를 들어, 재생 시간이 3초일 때, 0.6을 전달할 경우 3 * 0.6을 한 1.8초만큼만 재생되고 처음 상태로 돌아가게 됩니다.
#logo {
animation : lotate 3s infinite ;
/* 애니메이션이 무한 반복 됩니다. */
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 됩니다. */
}animation-play-state
애니메이션이 재생 상태를 설정합니다. 기본 값인running, 애니메이션을 정지시키는 pause 를 값으로 지정할 수 있습니다. 보통 이벤트로 애니메이션의 재생 상태를 변경할 때 사용합니다
#logo {
animation : lotate 3s pause ;
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-play-state : pause ;
}animation-fill-mode
애니메이션 재생 전 후의 상태를 지정합니다.
none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지합니다.
forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지합니다.
backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지합니다.
both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지합니다.
@keyframes 중간값
이번에는 @keyframes 중간값의 의미를 알아보겠습니다. 우선, 다음과 같은 애니메이션을 설정해주겠습니다.
#logo {
**animation-name : lotate;** /* lotate 라는 이름의 키프레임 애니메이션을 */
animation-duration : 3s; /* 3초 동안 재생하며, */
animation-iteration-count : infinite; /* 애니메이션을 무한 반복하고, */
animation-timing-function : linear; /* 선형으로 재생합니다. */
}
/* 아래와 같이 일괄 작성해도 동일하게 적용됩니다. */
#logo {
animation : **lotate** 3s infinite linear;
}
//3초동안 로고가 서서히 회전
//키프레임 설정에서 중간값만 50%에서 80%으로 변경하면
//애니메이션이 재생되는 3초중에서 80%인 2.4초동안 180도 회전하고, 나머지 20%인 0.6초동안 360도까지 회전
//키프레임을 설정하면서 주는 중간값은 애니메이션 재생 시간을 기준으로 한다.CSS Animation으로 움직이는 사각형 만들기
움직이는 사각형을 세 개 만들어 각 속성을 어떻게 주느냐에 따라 사각형의 움직임을 다르게 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/index.css"
<title>CSS Animation</title>
</head>
<body>
<div id="code">code</div>
<div id="states">states</div>
<div id="love">love</div>
</body>
</html>
#code {
position: absolute;
left: 100px;
width: 100px;
height: 50px;
margin-left: -50px;
background-color: violet;
color: #fff;
/*애니메이션 이름 */
animation-name: code;
animation-duration: 3s;
/* 애니메이션의 진행 속도를 지정할 수 있습니다. */
animation-timing-function: ease;
animation-direction: alternate;
animation-fill-mode: forwards;
}
#states {
position: absolute;
left: 100px;
width: 100px;
height: 50px;
top: 100px;
margin-left: -50px;
background-color: purple;
color: #fff;
animation-name: states;
animation-duration: 3s;
/* 지연 시간을 지정하면 그 시간만큼 있다가 애니메이션이 시작합니다.*/
animation-delay: 2s;
animation-timing-function: linear;
/*count 개수를 지정하면 그 개수만큼만 움직입니다.*/
animation-iteration-count: 5;
animation-direction: alternate;
animation-fill-mode: forwards;
}
#love {
position: absolute;
left: 100px;
width: 100px;
height: 50px;
top: 170px;
margin-left: -50px;
background-color: rgb(66, 4, 66);
color: #fff;
animation-name: code;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-direction: alternate;
/* backwards는 처음의 스타일로 돌아갑니다. */
animation-fill-mode: backwards;
}
/* 키프레임 이름 = 애니메이션 이름 */
@keyframes code {
0% {
left: 100px;
}
100% {
left: 300px;
background-color: blueviolet;
}
}
@keyframes states {
0% {
left: 200px;
}
100% {
left: 300px;
}
}사선으로 나타나며 바닥에 부딪히는 공 구현하기
CSS 애니메이션을 어떻게 주느냐에 따라 공이 사선으로 나타나며 바닥에 부딪히는 느낌을 줄 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<div></div>
</body>
</html>@keyframes ball {
0% {
top: 0px;
background-color: #fff;
}
95% {
width: 100px;
background-color: cornflowerblue;
}
to {
top: 300px;
width: 115px;
height: 90px;
transform: translate(100px, 100px);
background-color: rgb(56, 94, 165);
}
}
div {
position: relative;
left: 100px;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: blue;
animation: ball 1s ease-in Infinite Alternate;
}