애니메이션의 속도 곡선 지정 > 퍼블리셔팁

퍼블리셔팁

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

애니메이션의 속도 곡선 지정 정보

CSS 애니메이션의 속도 곡선 지정

본문

애니메이션의 속도 곡선 지정


이 animation-timing-function속성은 애니메이션의 속도 곡선을 지정합니다.


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


1. ease - 느린 시작, 느린 시작, 천천히 끝내는 애니메이션 지정 (기본값)

2. linear - 시작부터 끝까지 동일한 속도의 애니메이션 지정

3. ease-in - 시작이 느린 애니메이션을 지정합니다.

4. ease-out - 느린 끝이있는 애니메이션을 지정합니다.

5. ease-in-out - 시작과 끝이 느린 애니메이션을 지정합니다.

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


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


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

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

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

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

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


[전체소스]


<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 50px;

    background-color: red;

    font-weight: bold;

    position: relative;

    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */

    animation: mymove 5s infinite;

}


/* Safari 4.0 - 8.0 */

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

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

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

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

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


/* Standard syntax */

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

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

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

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

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


/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {

    from {left: 0px;}

    to {left: 300px;}

}


/* Standard syntax */

@keyframes mymove {

    from {left: 0px;}

    to {left: 300px;}

}

</style>

</head>

<body>


<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>


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

<div id="div2">ease</div>

<div id="div3">ease-in</div>

<div id="div4">ease-out</div>

<div id="div5">ease-in-out</div>


</body>

</html>


추천
0

댓글 0개

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

회원로그인

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