기본 소스코드 추가

twilight92 · twilight92 · commit f60899582212 · 2024-09-03T22:00:10.000+09:00
diff --git a/animation/01.html b/animation/01.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>CSS Animation</title>
+	<style>
+		.ball {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			margin: auto;
+			width: 100px;
+			height: 100px;
+			border-radius: 50%;
+			background: coral;
+			
+		}
+
+		/* animation: 축약형, 단축형, 속기형 등으로 부른다. 줄여서 쓰는 형태로, 애니메이션의 모든 속성을 한꺼번에 지정 가능 */
+		/* animation-name: 애니메이션의 이름 */
+		/* animation-duration: 애니메이션이 재생(지속)되는 시간 */
+		/* animation-delay: 애니메이션의 재생이 시작되기 전 대기 시간 */
+		/* animation-timing-function: 애니메이션의 가속, 감속을 조정해서 애니메이션 느낌을 다르게 */
+		/* animation-iteration-count: 애니메이션의 반복 횟수 */
+		/* animation-direction: 애니메이션의 재생 방향 normal, reverse, alternate, alternate-reverse */
+		/* animation-play-state: 애니메이션의 재생, 정지 상태 running, paused */
+		/* animation-fill-mode: 애니메이션이 재생되지 않는 동안의 스타일을 지정 none, forwards, backwards, both */
+	</style>
+</head>
+<body>
+	<div class="ball"></div>
+</body>
+</html>
