2) CSS3 양식을 이용한 애니메이션
CSS3 애니메이션
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 준다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가진다.
⊙ 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다.
⊙ 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다.
⊙ 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있다.
애니메이션 적용하기
CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정한다.
애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다.
이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 주의해야 한다.
애니메이션의 중간 상태는 아래에서 다룰 @keyframes 규칙을 이용하여 기술한다.
animation 속성의 하위 속성
animation-delay
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
animation-direction
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
animation-duration
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
animation-iteration-count
애니메이션이 몇 번 반복될지 지정한다. infinite로 지정하여 무한히 반복할 수 있다.
animation-name
이 애니메이션의 중간 상태를 지정한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.
animation-play-state
애니메이션을 멈추거나 다시 시작할 수 있다.
animation-timing-function
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.
animation-fill-mode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
CSS 애니메이션 예제1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-webkit-keyframes myAnimation {
0% {width: 100px; left: 0px; background: orange;}
30% {width: 250px; left: 150px; background: green;}
50% {width: 400px; left: 300px; background: blue;}
80% {width: 250px; left: 450px; background: yellow;}
100% {width: 100px; left: 600px; background: red;}
}
div {
width:100px;
height: 100px;
position:relative;
background: orange;
-webkit-animation-name: myAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 0.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
</style>
</head>
<body>
<div> Animation 속성 </div>
</body>
</html>
예제를 연습해 봅시다
CSS 애니메이션 예제2
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
</head>
<body>
<p>Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. Test용 글입니다. </p>
</body>
</html>
예제를 연습해 봅시다
