본문 바로가기
개발 스터디/css

14. 트랜지션

연우0 2023. 7. 30. 22:43

트랜지션 - css 프로퍼티 값 변화할 때 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width:100px;
                height:100px;
                background-color: red;
            }
            div:hover{
                border-radius: 50%;
                background-color: blue;
            }
   
        </style>
    </head>
    <body>
        <div>
           
        </div>
    </body>
 
</html>

상태 변화에 따라 css 프로퍼티 변경>표시 변화 지체 없이 발생

div요소에 마우스가 올라가서 hover 상태되면 즉시 변경됨

 

트랜지션 : 표시변화 부드럽게하기 위해 애니메이션 속도 조절 > 변화가 일정 시간에 걸처 일어나게

div{
                width:100px;
                height:100px;
                background-color: red;
                transition: all 2s;
            }
            div:hover{
                border-radius: 50%;
                background-color: blue;
            }

2초에 걸처 이루어지게

div에 트랜지션 설정 > 마우스가 올라갈때, 내려갈때 모두 발동

div:hover에 트랜지션 설정 > 올라갈때 발동, 내려올때는 발동X

 

transition은 자동으로 발동X, :hover 같은 가상 클래스 선택자 또는 JS의 부수적인 액션에 의해 발동됨

 

>만약 트랜지션이 자동 발동 원한다면 CSS 애니메이션을 사용

 

transition-property : 트랜지션의 대상이 되는 css프로퍼티 지정 ㅣ 기본값 all

transition-duration : 트랜지션이 일어나는 지속시간을 초 단위/밀리 초 단위로 지정 l 0s

transition-timing-function : 트랜지션 효과를 위한 수치 함수를 지정 l ease

transition-delay : 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하느 ㄴ사이에 대기하는 시간을 초 단위/밀리 초 단위로 지정 ㅣ 0s

transition : 모든 트랜지션 프로퍼티 한번에 지정

 

1. transition-property : 트랜지션의 대상이 되는 css 프로퍼티명 지정, 지정하지 않으면 모든 프로퍼티가 트랜지션의 대상이됨

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width:100px;
                height:100px;
                background-color: red;
                transition-property: width, background-color;
                transition-duration: 2s, 2s;
            }
            div:hover{
                width : 300px;
                border-radius: 50%;
                background-color: blue;
            }
   
        </style>
    </head>
    <body>
        <div>

        </div>
    </body>
 
</html>

모든 css의 프로퍼티가 트랜지션의 대상이 되는 것은 아님

트랜지션의 대상 가능한 css 프로퍼티

// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
 
// Background
background-color background-position
 
// 좌표
top left right bottom
 
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
 
// 기타
opacity outline-color outline-offset outline-width
visibility z-index

요소의 프로퍼티 값 변화>레이아웃 작업 계산>성능 저하의 원인

따라서 layout에 영향 주는 트랜지션 효과는 피해야

 

layout에 영향 주는 프로퍼티

width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space

2. transition-duration

트랜지션에 일어나는 지속시간을 초/밀리초 단위로 지정

지정하지 않으면 기본값 0s가 적용되어 어떠한 트랜지션 효과도 볼수없음

 

아래의 경우 width 2s, opacity 1s, left 2s, top 1s

div {
      transition-property: width, opacity, left, top;
      transition-duration: 2s, 1s;
}
   

3. transition-timing-function

트랜지션 효과의 변화 흐름, 일종의 변화리듬 지정

키워드 지정(기본값은 ease)

ease 느리게 시작>점점 빨라졌다가 느려지면서 종료

linear 등속 운동

ease-in 느리게 시작한후 일정 속도에 다다르면 등속운동

ease-out 등속으로 시작해 점점 느려지면서 종료

ease-in-out ease와 비슷하게 느리게 시작>느려지면서 종료

 

4. transition-delay

프로퍼티 값 변화해도 즉시 실행X, 일정시간 대기 후 트랜지션 실행되도록

 

5. transition

모든 트랜지션 프로퍼티 한번에 지정하는 shorthand

 

transition : property duration function delay

기본값 : all 0 ease 0

지정하지 않는 경우 duration이 0으로 설정되어 어떠한 트랜지션도 실행되지 않음

 

'개발 스터디 > css' 카테고리의 다른 글

16. 트랜스폼  (0) 2023.08.03
15. 애니메이션  (0) 2023.08.03
13. 그레이디언트  (0) 2023.07.30
12. 그림자  (0) 2023.07.30
벤더 프리픽스  (0) 2023.07.30

'개발 스터디/css' Related Articles

티스토리툴바