[Web/CSS] CSS - 애니메이션

티스토리 뷰

Front-end/CSS

[Web/CSS] CSS - 애니메이션

poopooreum 2024. 4. 30. 20:50

✏️ animation 속성

자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있음 / 특정 지점에서 스타일을 바꾸면서 애니메이션을 만들고, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 함, 키프레임은 @keyframe 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 특성을 지정

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 지정
animation-delay	애니메이션의 시작 시간을 지정
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정
animation-duration	애니메이션의 실행 시간을 지정
animation-iteration-count	애니메이션의 반복 횟수를 지정
animation-name	@keyframes로 설정해 놓은 중간 상태 지정
animation-timing-function	키프레임의 전환 형태를 지정
animation	animation 속성을 한꺼번에 묶어서 지정

#1 애니메이션의 지점과 이름을 설정하는 @keyframes속성, animation-name 속성

애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes속성을 이용해 바뀌는 지점 설정

기본형  => @keyframes <이름> { <선택자> { <스타일> } } 
키프레임 속성에서 사용하는 선택자는 속성값이 바뀌는 지점을 가리킴. 예를 들어 애니메이션의 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50%위치에 키프레임을 추가

또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별
기본형  => animation-name<키프레임 이름> | none

#2 애니메이션의 실행 시간을 지정하는 animation-duration 속성

기본형 => animation-duration: <시간>

animation-duration 속성에서 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위
기본값이 0이므로 값을 지정하지 않으면 애니메이션은 실행되지 않음

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Animation</title>
	<style>
		#container{
			width:500px;
			margin:20px auto;
		}
		.box{
			width: 100px;
			height: 100px;
			float:left;
			margin:50px;
		}
		#box1 {
			background-color: #4cff00;
			border: 1px solid transparent;
			animation-name: shape;  /* 애니메이션 지정 */ 
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
		}
		#box2 {
			background-color: #8f06b0;
			border: 1px solid transparent;
			animation-name: rotate;  /* 애니메이션 지정 */
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
		}

		@keyframes shape { /* shape 애니메이션 정의 */
			from {
				border: 1px solid transparent;  /* 1px짜리 투명한 테두리 */
			}
			to {
				border: 1px solid #000;  /* 검정색 테두리 */
				border-radius: 50%;  /* 테두리를 둥글게 */
			}
		}

		@keyframes rotate {  /* rotate 애니메이션 정의 */
			from {
				transform:rotate(0deg)  /* 시작은 0도에서 */
			}
			to {
				transform: rotate(45deg);  /* 45도까지 회전 */
			}
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="box" id="box1"></div>
		<div class="box" id="box2"></div>
	</div>
</body>
</html>

#3 애니메이션의 방향을 지정하는 animation-direction 속성

애니메이션은 기본적으로 @keyframes에서 정의한 from에서 to 순서로 진행하는데 direction을 사용해 진행 방향 변경

기본형 => animation-direction: normal | reverse | alternate | alternate-reverse

종류	설명
normal	애니메이션을 from에서 to로 진행, 기본값
reverse	애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행
alternate	홀수 번째는 normal로, 짝수 번째는 reverse로 진행
alternate-reverse	짝수 번째는 normal로, 홀수 번째는 reverse로 진행

#4 애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성

트랜지션과 마찬가지로 animation에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선 만들 수 있음

기본형  => animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n,n,n)

#5 애니메이션의 속성을 한꺼번에 표기하는 animation 속성

트랜지션처럼 애니메이션도 animation을 이용해 모든 속성을 한꺼번에 지정 가능

기본형  => animation: <animation-name> | <animation-delay> | <animation-timing-function> | <animation-duration> | <animation-iteration-count> | <animation-direction>

저작자표시 비영리 변경금지

'Front-end > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 반응형 웹 (0)	2024.05.05
[Web/CSS] CSS - 복습6 (0)	2024.04.30
[Web/CSS] CSS - 트랜지션 (0)	2024.04.30
[Web/CSS] CSS - 변형 함수 (0)	2024.04.29
[Web/CSS] CSS - 복습 5 (0)	2024.04.29

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

푸으름

티스토리 뷰