[Css] - transition (트랜지션) 정리

Transition (트랜지션)

• 어떠한 변화하는 과정을 보여주는 것
• 요소의 속성을 서서의 다른 상태로 변화하는 애니메이션을 만드는 방법
• state (ex. :hover , :active ...)가 없는 요소에 붙는게 좋다
• transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다
• 트랜지션은 뿌리(:root)에 선언한다.
• 액션을 나눠서 주려면 콤마를 이용해서 따로 준다.

 

 

 

See the Pen Untitled by 정민희 (@alsgml1640) on CodePen.

 

 

property, duration

.transition {
        transition-property : width;
        transition-duration : 2s;
        transition-timing-function : linear;
        transition-delay: 1s;
    }

• property : 효과를 적용하고자 하는 css 속성
• duration : 효과가 나타나는데 걸리는 시간
• timing-function : 효과의 속도 , linear은 ‘일정하게’ 라는 의미
• delay : 특정 조건하에서 효과 발동, 1s 는 ‘1초 후’ 라는 의미

가상 선택자 : hover

.transition:hover {
    width : 300px;
}

css에서 미리 만들어 놓은 클래스 ‘마우스를 올렸을 때’ 라는 조건

가상선택자는 선택자에 붙여서 사용해야 함

transition 종합

.transition {
    transition : width 2s linear 1s;
}
.transition:hover {
    width : 300px;
}

마우스를 올리면 1초 후에 width 값이 300px로 , 2초동안, 속도 일정하게 변하는 애니메이션 효과 발동

• 항상 먼저 나오는 숫자가 duration , 나중에 나오는 숫자는 delay
• 숫자가 하나인 경우는 duration 에 적용, delay는 생략 가능

 

! 출처

- 노마드코더 코코아톡 클론코딩 고급CSS 이론 부분

- 엘리스 sw 교육