transition 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2025/02 »
일	월	화	수	목	금	토
						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

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

transition 속성 본문

Front-End (웹)/CSS

transition 속성

친절한개발초보자 2021. 8. 31. 23:33

728x90

transition이란

웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것
웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
트랜지션은 마이크로소프트 엣지와 익스플로러 10 이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원한다.

★ 주의점
: 동작구문에는 넣지 말 것! (무조건 transition은 태그에 넣어준다)

트랜지션과 속성

종류	설명
transition-property	트랜지션의 대상을 지정한다.
transition-duration	트랜지션의 실행할 시간을 지정한다.
transition-timing-function	트랜지션의 실행 형태를 지정한다.
transition-delay	트랜지션의 지연 시간을 지정한다.
transition	transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 정한다.

트랜지션의 대상을 지정하는 transition-property 속성

transition-property: all ¦ none ¦ <속성 이름>

- 속성값

종류	설명
all	all 값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 된다. (기본값)
none	트랜지션을 하는 동안 아무 속성도 바뀌지 않는다.
속성 이름	트랜지션 효과를 적용할 속성을 지정한다. 속성이 여럿일 경우 쉼표(,)로 구분하여 나열한다.

transition-property: all;			/* 해당 요소의 모든 속성에 트랜지션 적용 */
transition-property: background-color;		/* 해당 요소의 배경색에 트랜지션 적용 */
transition-property: width, height;		/* 해당 요소의 너비와 높이에 트랜지션 적용 */

- hover, active 구문과 같이 사용하면 동작 구문에 작성한 css속성들의 애니메이션 시간을 개별적으로 적용시켜 줄 수 있다.

cf) 동작
- hover
: 마우스를 올렸을 때 동작
- active
: 마우스를 클릭했을 때 동작

트랜지션의 진행 시간을 지정하는 transition-duration 속성
- 진행 시간을 지정해야 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있다.
- 지정할 수 있는 시간 단위는 초(second) 또는 밀리초(millisecond)이다.
```
transition-duration: <시간>
```
ex) transition-property:width, background-color, font-size;
transition-duration:1s,3s,10s
→ width는 1초 동안, background-color는 3초 동안, font-size는 5초 동안 변화한다.

트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성
- 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있다.

transition-timing-function: linear ¦ ease ¦ ease-in ¦ ease-out  
			    ¦ ease-in-out ¦ cubic-bezier(n, n, n, n)

- 속성 값

종류	설명
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝낸다. (기본값)
linear	시작부터 끝까지 똑같은 속도록 진행한다.
ease-in	느리게 시작한다.
ease-out	느리게 끝낸다.
ease-in-out	느리게 시작하고 느리게 끝낸다.
cubic-bezier(n, n, n, n)	베지에 함수를 정의해서 사용한다. 이때 n값은 0~1 사이만 사용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>transition #2</title>
    <style>
        *{margin:0;padding:0}
        
        #a{width:900px;border:4px solid red;}
        #a div{width:100px;height:100px;
                background-color:#123456;
                margin-top:30px;transition:3s;}
        
        #a:hover .b{width:900px;}
        
        #a div:nth-child(1){transition-timing-function:linear;}
        #a div:nth-child(2){transition-timing-function:ease-in;}
        #a div:nth-child(3){transition-timing-function:ease-out;}
        #a div:nth-child(4){transition-timing-function:ease-in-out}
    </style>
</head>
<bod>
    <div id="a">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
</bod>
</html>

트랜지션의 지연 시간을 설정하는 transition-delay 속성
- 트랜지션 효과를 언제부터 시작할 것인지 설정한다.
- 지정한 시간만큼 기다렸다가 트랜지션이 시작된다.
- 사용할 수 있는 값은 초(s)나 밀리초(ms)이며, 기본값은 0이다.

transition-delay: <시간>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>transition #1</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:400px;height:400px;
            background-color: #123456;
            transition:3s;}
        
        #a:hover{/*background-color:red;margin-left:200px;*/
                    border-radius:300px;}
        
        #b{width:400px;height:400px;
            background-color:#987654;
            transition:1s;
            transition-delay:5s;}
        
        #b:hover{margin-left:100px;}
    </style>
</head>
<body>
    <div id="a">div태그 입니다</div>
    <div id="b">div2태그 입니다</div>
</body>
</html>

트랜지션의 속성을 한꺼번에 표기하는 transition 속성
- 트랜지션의 적용 대상이 전체이고 각각의 진행 시간이 같다면 transition 속성으로 한꺼번에 지정하는 것이 편리하다.
```
transition: <transition-property값> ¦ <transition-duration값> ¦ <transition-timing-function값> 
¦ <transition-delay값>
```
- 속성을 작성하는 순서는 상관없다.
- 시간 값을 사용하는 속성이 2개(진행 시간,지연 시간)이므로 사진값이 2개 있다면 앞에 오는 시간값을 transition-duration 속성으로, 뒤에 오는 시간 값은 transition-delay 속성으로 간주한다.