CSS3 전환 효과 지연 > 퍼블리셔팁

퍼블리셔팁

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

CSS3 전환 효과 지연 정보

CSS CSS3 전환 효과 지연

본문

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>


<div></div>


<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>


추천
0

댓글 0개

전체 1,264
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT