CSS3의 @keyframes 규칙을 활용하면 요소가 한 스타일 상태에서 다른 상태로 전환되는 과정을 단계별로 세밀하게 제어할 수 있습니다. 이번 예제에서는 텍스트가 화면 오른쪽 바깥에서 시작해 왼쪽으로 미끄러지듯 들어오는 슬라이드 인(slide-in) 애니메이션을 구현합니다.
예제 코드
아래 코드를 실행하면 왼쪽 이동 애니메이션을 직접 확인할 수 있습니다. 특히 중간 키프레임(75%)에서 글자 크기와 너비가 일시적으로 변하면서 더욱 역동적인 시각 효과를 연출합니다.
<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%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe to make text changes.</p>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
코드 설명
- animation-duration: 3s — 애니메이션이 3초에 걸쳐 진행됩니다.
- @keyframes slidein — 'slidein'이라는 이름의 애니메이션 동작을 정의하고, h1 요소에 적용합니다.
- from — 요소가
margin-left: 100%(화면 오른쪽 바깥),width: 300%상태에서 시작합니다. - 75% — 진행률 75% 지점에서
font-size: 300%,margin-left: 25%,width: 150%로 변하며 글자가 커졌다 줄어드는 추가 효과를 줍니다. - to — 최종적으로
margin-left: 0%,width: 100%위치에 자연스럽게 안착합니다. - -moz-, -webkit- 접두사 — 구형 Firefox 및 Chrome/Safari 브라우저와의 호환성을 위한 벤더 접두사입니다. 최신 브라우저에서는 접두사 없이
@keyframes만 작성해도 정상 동작합니다.
페이지 하단의 Reload page 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다. 이처럼 키프레임의 시작(from), 중간(75%), 끝(to) 지점의 스타일을 조절하면 원하는 방향과 속도감을 가진 다양한 애니메이션을 순수 CSS만으로 손쉽게 만들 수 있습니다.