©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Animation</title>
	<style>
		p {
			height: 40px;
			width: 400px;
			border: solid 3px orange;
			-webkit-animation-name: movingPara;
			-webkit-animation-duration: 3s;
			animation-name: movingPara;
			animation-duration: 3s;
		}
		@-webkit-keyframes movingPara {
			from { margin-left: 100%; }
			to { margin-left: 0%; }
		}
		@keyframes movingPara {
			from { margin-left: 100%; }
			to { margin-left: 0%; }
		}
	</style>
</head>

<body>

	<h1>@keyframes 규칙을 이용한 애니메이션 효과</h1>
	<p>다양한 애니메이션 효과를 간단하게 줄 수 있어요!</p>

</body>

</html>