Develop/CSS

CSS3 Animation - 에니메이션

GuriZzang 2015. 8. 10. 15:38

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.



CSS3 기능중 상당히 재미 있는 기능이었는데요.

javascript중에서도 jQuery에서나 (javascript로 만들수도 있지만.. 기본 지원은 아니니까요~) 써봤던 Animation 기능 입니다.

일단. 샘플을 하나 보시죠.


Source 

?
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
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
 
/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
 
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
<div></div>
 
</body>
</html>



Demo


위의 예제는 단지 CSS만으로 이루어진 에니메이션 입니다.

javascript로 복잡하게 했던 에니메이션 기능을 CSS로 간단하게 처리할 수 있습니다.









예전부터 메뉴등에 마우스 오버시 색상이 변하는 기능은 CSS의 :hover 속성을 이용하여 만들곤 했었는데요.


Source 

?
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #btnText {text-align:center;}
        #btnText a {display:block; padding:10px 20px; cursor:pointer; background-color:red;}
        #btnText a:hover {background-color:blue;}
         
        #btnBgi {}
        #btnBgi a {
            display:inline-block; overflow:hidden; width:50px; height:0px; padding-top:50px;
            cursor:pointer; background:url(/demo/20150728_dfy/img/ico_sosial.png) 0 0 no-repeat;
            border:solid 1px red;
        }
        #btnBgi a:hover {
            background-position-y:-50px;
        }
    </style>
</head>
<body>
 
<p id="btnText">
    <a>마우스를 올리면 색이 변합니다.</a>
</p><p id="btnBgi">
    <a>버튼</a>
</p>
 
</body>
</html>



Demo

위의 소스처럼 :hover 속성을 이용하여 배경의 색상을 변경하거나 배경 이미지의 좌표값을 변경하여 롤오버 효과를 줄 수 있는데요. 한단계 더 나아가 에니메이션 효과를 줄 수 있다는것이 새삼 즐겁고 재미있게 느껴지네요.




이야기가 길어졌네요.

CSS3의 Animation의 2015년 08월 10일 기준 지원 브라우저는 아래와 같습니다.

Property
@keyframes10.04.0 -webkit-16.0
5.0 -moz-		4.0 -webkit-15.0 -webkit-
12.1
12.0 -o-
animation10.04.0 -webkit-16.0
5.0 -moz-		4.0 -webkit-15.0 -webkit-
12.1
12.0 -o-



그리고 기본적인 사용법 입니다.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    /*
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: green;}
    75% {background-color: blue;}
    100% {background-color: black;}
    */
}
 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}


에니메이션의 기본이 되는 키프레임을 만들어 줍니다.

@keyframes "에니메이션이름"{}


속성에는 두가지 방법이 있는데 기본적으론 시작과 끝의 속성이라고 생각하시면 됩니다.

from, to로 시작과 끝의 속성을 적어주실 수 있으며

0%, 25%~ 100% 처럼 진행률을 사용하여 속성을 적용할 수 있습니다.


div 에 기본적인 css 속성을 적어주고 위에서 만들어놓은 키프레임 에니메이션의 이름과 실행속도를 적어 줍니다.

animation-name: example;

animation-duration: 4s;





간단한 에니메이션 메뉴 버튼을 만들어 보았습니다.


Source 

?
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #btnBgi {}
        #btnBgi a {
            width:50px; height:50px; overflow:hidden;
            display:inline-block;
        }
        #btnBgi a span {
            float:left;
            display:inline-block; overflow:hidden; width:50px; height:0px; padding-top:50px;
            cursor:pointer; background:url(http://www.gurizzang.com/demo/20150728_dfy/img/ico_sosial.png) 0 0 no-repeat;
        }
        #btnBgi a.facebook span {background-position-x:0px;}
        #btnBgi a.tweet span {background-position-x:-50px;}
        #btnBgi a.pinter span {background-position-x:-100px;}
        #btnBgi a span:nth-child(2) {
            background-position-y:-50px;
            background-color:blue;
        }
        #btnBgi a:hover span:nth-child(1) {
            margin-top:-50px;
            animation-duration: 0.2s;
            -moz-animation-duration: 0.2s;
            -webkit-animation-duration: 0.2s;
            animation-name: exampleDown;
            -moz-animation-name: exampleDown;
            -webkit-animation-name: exampleDown;
        }
        #btnBgi a:not(:hover) span:nth-child(1) {
            margin-top:0px;
            animation-duration: 0.2s;
            -moz-animation-duration: 0.2s;
            -webkit-animation-duration: 0.2s;
            animation-name: exampleUp;
            -moz-animation-name: exampleUp;
            -webkit-animation-name: exampleUp;
        }
        @keyframes exampleDown {
            0%   {margin-top:0px;}
            100% {margin-top:-50px;}
        }
        @keyframes exampleUp {
            0%   {margin-top:-50px;}
            100% {margin-top:0px;}
        }
    </style>
</head>
<body>
 
<p id="btnBgi">
    <a class="facebook">
        <span>버튼1</span>
        <span>버튼2</span>
    </a>
    <a class="tweet">
        <span>버튼1</span>
        <span>버튼2</span>
    </a>
    <a class="pinter">
        <span>버튼1</span>
        <span>버튼2</span>
    </a>
</p><p>
    위의 이미지에 마우스를 올려 보세요.
    하단은 사용된 png 이미지 입니다.
</p>
<div>
    <img src="http://www.gurizzang.com/demo/20150728_dfy/img/ico_sosial.png" />
</div>
 
</body>
</html>



Demo


위의 예제대로 만들게 되면

처음에는 복잡할 수 있겠으나 javascript로 만드는 것보다 훨씬 깔끔하고 간단하게 버튼을 추가 삭제 하실 수 있습니다.

class별로 배경이미지의 x좌표를 변경해 준다면 나머지 에니메이션은 공통적으로 적용되니까 말이죠.


이제 CSS3 에니메이션만 있다면 간단한 에니메이션 효과는 javascript로 복잡한 이벤트를 적용하지 않아도 됩니다.

정말 쉽쥬~~~~?

저작자표시

'Develop > CSS' 카테고리의 다른 글

텍스트에어리어(textarear) 가로 100%에 맞추기  (0) 2014.08.25
[CSS] footer하단 고정시키기 (1단)  (0) 2014.02.21

'Develop/CSS'의 다른글

  • 현재글CSS3 Animation - 에니메이션

관련글

티스토리툴바