티스토리 뷰

HTML,CSS

CSS를 변형하는 transition속성

란텔 2016. 7. 6. 20:42

transition은 간단하게 설명하면 엘리먼트가 변하는 특정한 style속성에 애니메이션 효과를 주는 변형 속성이다.


transition은 비교적 최신 기술에 속하기 때문에 버전이 낮은 브라우저에서는 동작하지 않는다.



익스플로러 10이상

크롬

파이어폭스 5이상

사파리 4이상

오페라

에서만 동작한다.



transition은 부드러운 애니메이션 모션을 적용할 때 사용하는 것이다.



  • transition 변형 속성

  속성

 설명 

 transition

 모든 transition속성을 한번에 적용한다. 

 transition-delay

 이벤트가 발생한 뒤 몇초 뒤에 재생할지를 지정 

 transtion-duration

 몇 초 동안 재생 할지를 지정 

 transition-property

 어떤 style속성을 변형할지 지정 

 transition-timing-function

 




  • transition 변형 속성과 함께 적용 가능한 style속성

top, left, bottom, right

width, height

margin, padding

border-width, border-radius, boder-color

color, background-color

opacity, transform 




  • 테스트 코드

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
76
77
78
79
80
81
82
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
<script>
 
$(document).ready(function(){
    
    $('.graph').hover(function(){
        $('#txt').remove();
    });
    
    $('.box:last-child').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    //event handler
        $('.box').each(function(index,item){
            console.log($(item).width());
            if($(item).width() > 600){
                   $(item).text('작업이 완료되었습니다.');
                
                    setTimeout(function(){
                        $(item).text('')
                    }, 1500);   
            }
        });
    });
        
   
});
    
 
    
</script>    
    
<style>
    .graph {
        width : 610px;
        border : 2px solid black;
    }
    .box{
        margin-top: 1px;
        margin-bottom: 1px;
        margin-left: 0;
        left:0px;
        width:1px; 
        height:50px;   
        background-color: orange;
        
        transition-duration: 2s; /*몇초동안 재생할지*/
        transition-property: background-color, width;
        /*transition-delay: 5s;*/ /*몇초 후에 재생할지*/
    }
    .graph:hover > .box:nth-child(1){
        transition-timing-function:linear;
        margin-left:20px;
        width: 400px;    
    }
    .graph:hover > .box:nth-child(2){
        transition-delay:1s;
        transition-timing-function:ease;
        background-color:aqua;
        width: 500px;    
    }
    .graph:hover > .box:nth-child(3){
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(.42, 0, .58, 1);
       width: 608px;    
    }
    .graph:hover {
           right:20px;
    }
   
</style>
</head>
 <body>
    <div class="graph">
        <p id="txt">마우스를 여기에 올려놓아 보아요.</p>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" id="bar" ></div>
    </div>    
</body>       
</html>
cs

위 코드를 보면 .box에 transition-duration을 2초로 지정하여 .box에 대하여 일어나는 변형을 2초 동안 애니메이션 형식으로 변환이 되도록 하고있다.


두 번째 .box에는 transition-delay를 1초로 지정하였기 때문에 변형이 늦게 일어난다.


transition-timing-function은 수치와 관련된(그래프 같은) 변형을 할 때 지정하는 속성이다. 테스트 코드에는 쓸모가 없지만 그냥 넣어봤다. 어쨋든 각각의 엘리먼트가 서로 다른 변형 함수를 가지고 애니메이션을 진행하게 된다.


기본적으로 적용 가능한 style속성에 대하여 모두 변형 애니메이션이 일어나지만 transition-property를 사용하면 지정한 style외에는 변형 애니메이션이 일어나지 않는다.




테스트 실행 화면

마우스를 여기에 올려놓아 보아요.


저작자표시 비영리 변경금지

'HTML,CSS' 카테고리의 다른 글

레이아웃 연습2[전체보기 만들기]  (0) 2014.05.06
[HTML CSS 레이아웃] 레이아웃 연습 1  (0) 2014.04.30
CSS 선택자 종류  (0) 2013.11.10
공유하기 링크
Comments
Related Articles more
최근에 올라온 글
최근에 달린 댓글
TAG
more
Total
Today
Yesterday