다음 예제는 CSS3의 @keyframes 문법을 사용하여 요소가 화면 왼쪽 방향으로 이동하며 나타나는 애니메이션을 구현한 것입니다. 애니메이션의 이름(slidein)과 지속 시간(3초), 그리고 시작과 끝 상태에서의 너비 및 여백(margin-left) 변화를 어떻게 정의하는지 확인할 수 있습니다.
예제 코드
<html>
<head>
<style type = "text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%; width:300%
}
to {
margin-left:0%; width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%; width:300%
}
to {
margin-left:0%; width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>왼쪽으로 이동하는 애니메이션의 예제입니다.</p>
<button onclick = "myFunction()">페이지 새로고침</button>
<script> function myFunction() { location.reload(); } </script>
</body>
</html>
코드 동작 원리
1. 애니메이션 정의 (@keyframes)
@keyframes slidein 규칙은 'slidein'이라는 이름의 애니메이션을 정의합니다. from 구간에서는 요소가 margin-left: 100%, width: 300% 상태로 시작하여, to 구간에서 margin-left: 0%, width: 100%로 부드럽게 전환됩니다. 그 결과 요소가 화면 바깥에서 왼쪽으로 밀려 들어오며 자연스럽게 등장하는 효과가 완성됩니다.
2. 벤더 접두사(Vendor Prefix)
예제에서 -moz-(Firefox)와 -webkit-(Chrome, Safari 등) 접두사가 붙어 있는 것을 볼 수 있습니다. 이는 과거 특정 브라우저에서 CSS 애니메이션을 실험적으로 지원하기 위해 사용되던 방식입니다.
참고: 최신 브라우저에서는 벤더 접두사 없이 표준 속성인 animation-duration, animation-name, @keyframes만 작성해도 정상적으로 동작합니다. 다만 구형 브라우저 호환성이 필요하다면 접두사를 함께 유지하는 것이 좋습니다.
3. 페이지 새로고침 버튼
애니메이션은 페이지가 로드될 때 한 번 실행되므로, 결과를 반복해서 확인하려면 새로고침이 필요합니다. 예제에는 location.reload() 함수를 호출하는 버튼이 포함되어 있어 클릭 한 번으로 애니메이션을 다시 재생할 수 있습니다.