MarkUp/CSS

[CSS] transition 이해하기

hhnn 2021. 9. 5. 17:06

transition이란?

'전이', '이행'이라는 사전적 의미를 가지고 있으며,

한 상태에서 다른 상태로 변형될 때 일정 시간 동안 변화하는 과정을 말한다.

 


transition 특징

1. 적용될 대상은 초기/종료 상태의 스타일과 transition 속성의 정의가 필요하다.

2. 애니메이션 발생을 위한 가상 선택자(:hover 등등) 또는 js 방아쇠(Trigger)가 필요하다.


transition 속성

속성 설명 기본값
1. transition-property CSS 속성 지정 all
예시) transition-property : width, background-color, color;
2. transition-duration [필수값] 실행 시간 0s
예시) transition-duration: 0.5s;
3. transition-timing-function 가속, 감속 설정 ease
예시) transition-timing-function:
4. transition-delay 실행 지연 시간 0s
예시) transition-delay: 0.5s;
5. transition 속기형 선언(한줄 축약 작성)  
예시) transition: <property> <duration> <timing-function> <delay>; 
                  -> color 2 ease 3s;  (폰트색상 3초 뒤에 2초간 변하게)

1. transition-property

transition-property: none / all / property;

none: 모든 속성 적용하지 않음

all: 모든 속성에 적용

property: 개별 속성 적용, 여러개 속성을 지정할 경우 쉼표로 구분한다.

transition-property: background-color, width;

See the Pen transition-property by limhaneul2244 (@limhaneul2244) on CodePen.

 

 

transtion은 hover가 아닌 곳에 지정해야 한다.

See the Pen Untitled by limhaneul2244 (@limhaneul2244) on CodePen.

 

 

 

2. transition-duration (필수값)

transition-duration: time;
/* 초(s)단위, 밀리(ms) 초단위로 적용 가능 */
transition-duration: .5s, 500ms;

 

 


3. transition-timing-function

 

구분 속성명 설명
ease ease(기본값) 느리게 시작한 후 빠르게 가속되다 다시 느려짐
linear 속도 변화 없이 일정함
ease-in 가속, 애니메이션 느리게 시작한 후 빨라짐
ease-out 감속, 애니메이션 빠르게 시작한 후 느려짐
ease-in-out ease와 유사하나 변화정도가 급격하지 않음
cubic-bezier(n, n, n, n) 3차 베지어 곡선은 정교한 제어 시 사용
steps(n, start | end) 시퀀스 이미지 제어시 사용, steps(전체 프레임 수)

 

 

See the Pen by limhaneul2244 (@limhaneul2244) on CodePen.

 

 

 

easing 함수 치트

 

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

 


transition 적용 예시

 

/* 개별 선언 */
transition-property: width;
transition-duration: .5s;
transition-timing-function: ease;
transition-delay: 1s;

/* 축약 선언(가운데 콤마를 넣으면 안됨!!) */
transition: width .5s ease 1s;

 


 

CSS 애니메이션 도구

https://matthewlein.com/tools/ceaser

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

애니메이션 테스트가 가능하다.

반응형
SMALL