<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
@keyframes bomb {
from { font-size : 500%; }
to {font-size : 100%;}
}
h3 {
animation-name : bomb;
animation-duration : 3s;
animation-iteration-count : infinite;
}
@keyframes bomb2 {
from { font-size : 100%;}
to {font-size : 500%;}
}
h2 {
animation-name : bomb2;
animation-duration : 3s;
animation-iteration-count : infinite;
}
</style>
</head>
<body>
<h3>꽝!</h3>
<hr>
<p> 꽝! 글자가 3초동안 500%에서
시작하여 100%로 바뀌는
애니메이션 입니다. 무한 반복 입니다.</p><br>
<h2>팡~</h2>
<hr>
<p> 팡~ 글자가 3초동안 100%에서
시작하여 500%로 바뀌는
애니메이션 입니다. 무한 반복 입니다.</p>
</body>
</html>
애니메이션 효과를 적용하기 위해 애니메이션에 대한 키프레임(@keyframes)을 정의해야 한다.
키 프레임의 from에 처음 스타일을 정의하고 tod에 마지막 스타일을 정의한다.
또, %를 이용해 세부적으로 스타일을 정의할 수 있다.(시작0%~종료 100%)