CSS3 전환 효과 지연

수다왕

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

· 8년 전 · 조회 1769 1769

CSS3 전환 효과 지연

이 transition-delay속성은 전환 효과의 지연을 초 단위로 지정합니다.

다음 예제는 시작하기 전에 1 초의 지연이 있습니다.

예

div {

-webkit-transition-delay: 1s; /* Safari */

transition-delay: 1s;

}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

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

-webkit-transition-delay: 1s; /* Safari */

transition: width 3s;

transition-delay: 1s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

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

<p>Hover over the div element above, to see the transition effect.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>

</html>

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
107	HTML	cart클래스1	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3334
106	HTML	비교 복사 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3216
105	HTML	싸이월드 둥근 테두리 만드는 방법 [2]	그레이스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4946
104	HTML	페인트 브러시 툴(Paintbrush Tool, 단축키 - B)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6287
103	HTML	올가미 툴(Lasso Tool, 단축키 - L)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5265
102	HTML	포토샵 레이어의 이해 [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4622
101	HTML	점선 그리는 법... [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3436
100	HTML	일러스트 단축키2	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6187
99	HTML	스타일 시트로 마우스 오버와 아웃시 바뀌는 색깔	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5020
98	HTML	XP서비스팩2 무시하고 새창 띄우기	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3443
97	HTML	개행문자 없애기[펌] [1]	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4438
96	HTML	우체국- 해외발송 구역 및 나라구분 (우편번호와 비슷)	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6877
95	HTML	이미지(img)를 이용한 백그라운드 통신	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4332
94	HTML	[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3216
93	HTML	웹 폰트 적용 시키기 - 초보자용 -	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5756
92	HTML	페이지 자동 이동 방법 3가지!!!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4150
91	HTML	body옆의 스크롤바흔적없애기 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5178
90	HTML	마우스 오른쪽 버튼 사용금지	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3237
89	HTML	마우스 룰오버시 여러가지 효과내기	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3160
88	HTML	포토샾 팁 72가지 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3626
87	HTML	업로드시 중복 파일명 체크및 새로운 이름 생성 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5163
86	HTML	디렉토리 이미지 뷰어 [18]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4809
85	HTML	GD와 GifSicle을 이용한 animationGIF 생성하기 [4]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4138
84	HTML	PHP 한글 메뉴얼[Professional HTML Preprocessor]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3492
83	HTML	register_global=off 일때 파일 업로드 방법	빨간망토의비밀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3150
82	HTML	디렉토리 용량 체크 (윈도우 리눅스 공용) [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4917
81	HTML	password() 의 함수로 암호화한 스크립트를 복호화 할수 없습니다.!! [1]	damoa.biz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4129
80	HTML	insertRow,insertCell,createElement,innerHTML [2]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4450
79	HTML	디렉토리별 용량체크 (Linux server) [3]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3581
78	HTML	[영문] Ajax 사이트 한곳 더 소개 합니다~! [1]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4917