CSS3 전환 속도 곡선 지정

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1723 1723

CSS3 전환 속도 곡선 지정

이 transition-timing-function속성은 전환 효과의 속도 곡선을 지정합니다.

transition-timing-function 속성은 다음 값을 가질 수 있습니다.

1. ease - 천천히 시작한 후 전환 효과를 지정하고 빠르다가 느리게 끝냅니다 (기본값).

2. linear - 시작부터 끝까지 동일한 속도의 전환 효과를 지정합니다.

3. ease-in - 느린 시작으로 전환 효과 지정

4. ease-out - 느린 끝으로 전환 효과 지정

5. ease-in-out - 느린 시작과 끝으로 전환 효과를 지정합니다.

6. cubic-bezier(n,n,n,n) - 입방체 베 지어 함수로 자신 만의 값을 정의 할 수 있습니다.

다음 예제는 사용할 수있는 몇 가지 다른 속도 곡선을 보여줍니다.

예

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}

/* For Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div><br>

<p>Hover over the div elements above, to see the different speed curves.</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1247	레이아웃	로딩 타입 1번 스킨 및 코드 링크로 들어와서 긁어가세요. [10]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1602
1246	레이아웃	로딩 타입2(어제에 이어서... 그리고 개발자 설명 추가) [11]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1215
1245	레이아웃	버튼 UI(hover시 테두리 애니메이션 및 색깔변경) [3]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1987
1244	레이아웃	로딩 타입5(글자 귀엽게 통통 요청사항) [4]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1503
1243	HTML	스크롤다운시 모션효과	조아웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1667
1242	HTML	안드로이드 아이폰 기기별 SMS 문자버튼	godmin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	988
1241	HTML	간단한 FLEX 예제	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1184
1240	HTML	간단한 반응형 페이지 레이아웃 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1205
1239	HTML	간단한 Flex 활용 예제 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1796
1238	CSS	가운데 정렬. 가장 심플?(정리) [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1303
1237	CSS	textarea의 이런 트릭? 들어보지도 못했던? [2]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1770
1236	CSS	css의 상속에 관한 팁입니다. [3]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1731
1235	HTML	구글 검색 최적화하는 태그 입니다. [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1193
1234	기타	GNUBOARD5에서 SVG 로딩바로 백로딩을 띄우는 코드에요 [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	881
1233	CSS	aspect-ratio 활용하기	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1112
1232	기타	준비중, 공사중 임시페이지 - 마우스에 반응하며 움직이는 기하학 배경 [2]	웹사이팅 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2129
1231	CSS	개인적으로 꼭 이해하고 넘어가야 할 것 3가지 [8]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1909
1230	CSS	progress 엘레먼트의 스타일링 [3]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1917
1229	반응형	[bootstrap5] 모바일에서 br태그 줄바꿈 기능 없애기	까투리장끼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1217
1228	반응형	모바일에서 br태그 줄바꿈 기능 없애기 [7]	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	4166
1227	웹접근성	웹 표준 검사하기	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1719
1226	반응형	반응형을 위한 미디어쿼리 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1994
1225	CSS	Animation 동작 효과 주기 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1555
1224	HTML	버튼 클릭시 리스트 스크롤 상단으로 이동하기	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1657
1223	HTML	모바일 정회원 가입페이지 만들어주실분 있을까요?? [1]	위치앱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1382
1222	CSS	body 외부 정렬	EI소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1378
1221	CSS	이미지 비율대로 리사이징 하기 [1]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1664
1220	CSS	flex 레이아웃 [1]	네이비블루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2017
1219	CSS	flex 개념 이해하기 좋은 사이트 [4]	생선구이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1628
1218	기타	howler.js [2]	min0000 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2486