목차
- transition-timing-function 예제 - 처음부터 끝까지 동일 속도 트랜지션 효과
- transition-timing-function 정의
- transition-timing-function 구문
- transition-timing-function 예제 - linear/ease/ease-in/ease-out/ease-in-out 차이
- transition-timing-function 예제 - cubic-bezier() 함수로 위 예제와 동일 효과 구현
transition-timing-function 예제 - 처음부터 끝까지 동일 속도 트랜지션 효과
<style>
div {
width: 200px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
transition-timing-function 정의
트랜지션(=전환) 효과 속도 곡선 지정.
1.
이 속성 지정 시 transition-duration (= 트랜지션 완료에 걸리는 시간) 동안 지정 속도 곡선에 따라 속도 변함.
2.
3.
IE10 이상 주요 최신 브라우저 지원. (구형 브라우저 경우 접두사 필요)
- Chrome, Safari 브라우저 경우: -webkit-
- Firefox 경우: -moz-
- Opera 경우: -o-
4. MDN transition-timing-function 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
transition-timing-function 구문
selector {transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;}
[속성값]
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)
step-start
동일: steps(1, start)
step-end
동일: steps(1, end)
steps(int,start|end)
- int - 함수의 간격수. (가능값: 0보다 큰 양의 정수)
- start|end - 간격 내에서 값 변경 지점. (생략 시, "end" 값 사용)
cubic-bezier(n,n,n,n)
cubic-bezier() 함수에서 고유한 값을 정의. (가능값: 0~1 사이의 숫자)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
transition-timing-function 예제 - linear/ease/ease-in/ease-out/ease-in-out 차이
<style>
div {
width: 150px;
height: 50px;
background: red;
color: white;
text-indent:10px;
transition: width 2s;
}
#a {transition-timing-function: linear;}
#b {transition-timing-function: ease;}
#c {transition-timing-function: ease-in;}
#d {transition-timing-function: ease-out;}
#e {transition-timing-function: ease-in-out;}
div:hover {
width: 500px;
}
</style>
<div id="a">linear</div>
<div id="b">ease</div>
<div id="c">ease-in</div>
<div id="d">ease-out</div>
<div id="e">ease-in-out</div>
결과보기
transition-timing-function 예제 - cubic-bezier() 함수로 위 예제와 동일 효과 구현
<style>
div {
width: 150px;
height: 50px;
background: red;
color: white;
text-indent:10px;
transition: width 2s;
}
#a {transition-timing-function: cubic-bezier(0,0,1,1);}
#b {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#c {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#d {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#e {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
div:hover {
width: 500px;
}
</style>
<div id="a">linear</div>
<div id="b">ease</div>
<div id="c">ease-in</div>
<div id="d">ease-out</div>
<div id="e">ease-in-out</div>
결과보기
