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 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
애니메이션 테스트가 가능하다.
'MarkUp > CSS' 카테고리의 다른 글
[CSS] 플렉서블 박스 기술 (flex-direction, flex-wrap, flex-flow) 알아보기 (0) | 2021.09.11 |
---|---|
[CSS] 플렉서블 박스 기본 개념 익히기 (0) | 2021.09.11 |
[CSS] 요소 숨김처리하기 (0) | 2021.07.29 |
[CSS] Reset CSS (0) | 2021.07.29 |
[CSS] article, section? 사용순서는? (0) | 2021.06.24 |