앞에서 배운 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있지만 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다.
CSS 애니메이션에서 사용하는 속성
CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다.
animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데,
이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 한다.
키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
다음 표는 animation 관련 속성을 정리한 것이다. 이 중에서 자주 사용하는 속성을 하나씩 살펴보자.
| 종류 | 설명 |
| @keyframes | 애니메이션이 바뀌는 지점을 지정한다. |
| animation-delay | 애니메이션의 시작 시간을 지정한다. |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정한다. |
| animation-duration | 애니메이션의 실행 시간을 지정한다. |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정한다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태를 지정한다. |
| animation-timing-function | 키프레임의 전환 형태를 지정한다. |
| animation | animation 속성을 한꺼번에 묶어서 지정한다. |
애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.
기본형은 다음과 같다.
@keyframes <이름> {
<선택자> { <스타일> }
}또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다.
이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다.
기본형은 다음과 같다.
animation-name: <키프레임 이름> | none@keyframes 속성에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킨다.
예를들어 애니메이션의 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50%위치에 키프레임을 추가하면 된다.
시작과 끝 위치만 사용하려면 0%, 100%와 같은 값 대신 from 과 to 라는 키워드를 사용해도 된다.
애니메이션의 실행 시간을 지정하는 animation-duration 속성
animation-duration 속성은 애니메이션을 얼마 동안 재생할 것인지 설정한다.
animation-duration: <시간>animation-duration 속성에서 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위이다.
기본값은 0이므로 animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.
다음 예제는 @keyframes을 이용해 shape와 rotate라는 애니메이션을 각각 정의한다.
그리고 #box1과 #box2에 각각 animation-name: shape와 animation-name: rotate를 사용해 애니메이션을 각각 실행한다.
이때 애니메이션 실행 시간은 3초이다.
이 애니메이션은 한 번만 실행하므로 재실행하려면 f5를 눌러 문서를 다시 불러와야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
.box{
width:200px;
height:200px;
}
#box1{
background-color: greenyellow;
border: 1px solid transparent;
animation-name: shape;
animation-duration: 3s;
}
#box2{
background-color: purple;
border: 1px solid transparent;
animation-name: rotate;
animation-duration: 3s;
}
@keyframes shape {
from { border: 1px solid transparent;} /*1px짜리 투명 테두리에서*/
to {
border: 1px solid black; /*검은색 테두리로 변경*/
border-radius:50%; /*테두리를 둥글게 변겅*/
}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to{ transform:rotate(45deg);}
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</body>
</html>
애니메이션의 방향을 지정하는 animation-direction 속성
애니메이션은 기본적으로 keyframes에서 정의한 from에서 to 순서로 진행하는데
animation-direction 속성을 사용해서 진행 방향을 바꿀 수 있다.
animation-directon: normal | reverse | alternate | alternate-reverse| 종류 | 설명 |
| normal | 애니메이션을 from에서 to로 진행한다. 기본값이다. |
| reverse | 애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행한다. |
| alternate | 홀수 번째는 normal로, 짝수 번째는 reverse로 진행한다. |
| alternate-reverse | 홀수 번째는 reverse로, 짝수 번째는 normal로 진행한다. |
반복 횟수를 지정하는 animation-iteration-count 속성
상황에 따라 애니메이션을 반복해서 보여 줘야 할 때는 animation-iteration-count 속성을 사용해 반복 횟수를 정합니다.
animation-iteration-count: <숫자> | infinite| 종류 | 설명 |
| 숫자 | 애니메이션의 반복 횟수를 정한다. |
| infinite | 애니메이션을 무한 반복한다. |
애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성
트랜지션과 마찬가지로 animationd에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있습니다.
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
애니메이션의 속성을 한꺼번에 표기하는 animation 속성
animation 속성을 한꺼번에 표기할 수 있다.
주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 것이다.
애니메이션 실행 시간을 지정하지 않으면 기본값으로 0이 적용되어 애니메이션 효과를 볼 수 없기 때문이다.
animation : <animation-name>|<animation-duration>|<animation-timing-function|
<animation-delay>|<animation-iteration-count>|<animation-direction>둘 이상의 애니메이션을 동시에 실행해야 한다면 쉼표로 구분하여 적어줄 수 있다.
예시는 다음과 같다
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
'📁Web Developing > CSS 기초' 카테고리의 다른 글
| VII. 반응형 웹과 미디어 쿼리 - 2. 미디어 쿼리 (0) | 2022.06.11 |
|---|---|
| VII. 반응형 웹과 미디어 쿼리 - 1. 반응형 웹 (0) | 2022.06.08 |
| VI. 트랜지션과 애니메이션 - 2. 트랜지션 (0) | 2022.06.08 |
| VI. 트랜지션과 애니메이션 - 1. 변형 (0) | 2022.06.07 |
| V. 고급선택자 - 3. 가상 클래스와 가상 요소 (0) | 2022.06.06 |
댓글