transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
- transition-property: 속성명
- transition-duration: 지속시간 (단축형으로 작성할 때 필수 포함 속성)
- transition-timing-function: 타이밍함수
- transition-delay: 대기시간
transition-property: 전환 효과를 사용할 속성 이름을 지정
all: 모든 속성에 적용 (기본값)
속성이름: 전환 효과를 사용할 속성 이름 명시
div {
width: 100px;
height: 100px;
background-color: orange;
transition:
width .5s,
background-color 2s;
}
transition-timing-function: 전환 효과의 타이밍(Easing) 함수를 지정
- ease: 느리게-빠르게-느리게 = cubic-bezier(0.25, 0.1, 0.25, 1) (기본값)
- linear: 일정하게 = cubic-bezier(0, 0, 1, 1)
- ease-in: 느리게 - 빠르게 = cubic-bezier(0.42, 0, 1, 1)
- ease-out: 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
- ease-in-out: 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0, 0.58, 1)
- ccubic-bezier(n, n, n, n): 자신만의 값을 정의(0~1)
- steps(n): n번 분할된 애니메이션
참고 사이트
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
developer.mozilla.org/en-US/docs/Web/CSS/easing-function
- CSS: Cascading Style Sheets | MDN
The CSS data type denotes a mathematical function that describes the rate at which a numerical value changes. This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. Th
developer.mozilla.org
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
transition-delay: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
0s: 대기시간 없음 (기본값)
시간: 대기시간(s)을 지정
div {
width: 100px;
height: 100px;
background-color: orange;
transition:
1s .5s;
}
'프론트엔드 > CSS' 카테고리의 다른 글
오버워치 영웅 선택 화면 실습 (0) | 2021.04.29 |
---|---|
CSS 변환 효과 (요소의 변환 효과) (0) | 2021.04.28 |
요소의 정렬(플렉스) (0) | 2021.04.26 |
요소의 배치 (0) | 2021.04.25 |
배경 속성 (0) | 2021.04.22 |