웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

Animation 본문

css3

Animation

jokack01 2013. 10. 8. 11:33

Animation

기존에 살펴 보았던 transition 이나 transform 속성을 사용하여 애니메이션 효과를 줄 수 있었다.

하지만 이것은 임의에 정해진 상태에서 다른 상태로 효과를 주는 것이다.

 

Animation의 속성을 이용하면 애니메이션의 시작점과 종료점을 명시적으로 제어할 수 있게 된다.

시작점과 종료점은 키프레임(keyframe) 개념으로 설명되며, 플래시나 에프터이펙트, 프리미어등 각종 모션 프로그램을 다뤄본 사람이라면 

이해가 쉬울 것이다.  이 키프레임들의 연결 및 이동으로 자연스러운 애니메이션 효과 처리가 가능해진다.

 

 

키프레임

애니메이션의 시작점과 정료점 사이의 효과를 프레임으로 나누어 각각의 css 속성들로 정의한다.

from ~ to 로 시작점과 종료점을 정의할 수 있으며, 비율로도 정의 할 수 있다.

키프레임의 정의 방법 : @-webkit-keyframes myAnimation( 키프레임, 키프레임의 이름 )

 

ex1) from ~ to 로 시작점과 종료점 구분하기

@-webkit-keyframes myAnimation {
from { opacity: 0.1; width: 150px; }
to { opacity: 1.0; width: 300px; }
}

ex2) 비율로 시작점과 종료점 구분하기

@-webkit-keyframes myAnimation {
0% { width: 100px; }
40% { width: 150px; }
60% { width: 75px; }
100% { width: 100px; }
}

 

 속성 

-webkit-animation-name : 이름을 부여하여 키프레임을 지정한다.

-webkit-animation-duration : 애니메이션이 실행되는 총 시간지정.

-webkit-animation-iteration-count : 애니메이션의 반복횟수 지정.(기본값1), 무한실행 할경우 infinite 를 지정한다.

-webkit-animation-direction : 키프레임 연결방향 지정. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결, 역방향으로의 연결을 원한다면 alternate 를 지정한다. 

-webkit-animation-timing-function : 변화되어가는 흐름, 시간에 따른 속도변화를 지정. ease(기본값), linear, ease-in, ease-out, ease-in-out 등이 제공된다.

-webkit-animation-play-state : 일시정지, 재시작 시킬경우 사용. running(기본값) 와 paused 값이 있다.

-webkit-animation-delay : 애니메이션이 실행되기 전 대기시간을 지정한다. (기본값0, 즉시 시작)

 

 ps. 현재는 웹킷 기반 브라우저에서만 가능하다.

 

 

 

예제1) frome ~ to 로 구분하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
@-webkit-keyframes myAnimation {
  from {
     opacity: 0.1;
     width: 150px;
     -webkit-transform: rotate(15deg);
   }
  to {
     opacity: 1.0;
     width: 300px;
     -webkit-transform: rotate(0deg);
   }
 }
  
 img {
    -webkit-animation-name: myAnimation ;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
  }
</style>
 
</head>
<body>
<h1>Animation</h1>
<p>from ~ to 로 시작점과 종료점 구분하기</p>
<img src="ho.jpg" />
</body>
</html>



예제2) 비율로 구분하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
Div {
width:100px; height:100px; background:red; position:relative;
animation:myfirst 5s linear 2s infinite alternate;
-webkit-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst {
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>Animation</h1>
<p>
<h3>비율로 시작점과 종료점 구분하기</h3>
색이 변하면서 위치 이동하는 애니메이션 <br>
</p>
<div>애니메이션 박스</div>
</body>
</html>

'css3' 카테고리의 다른 글

Color  (0) 2013.10.08
Multiple Columns  (0) 2013.10.08
Transition  (0) 2013.10.08
3D transform  (0) 2013.10.08
2D transform  (0) 2013.10.08
'css3' Related Articles more