Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

transition timing function 본문

TIS_2018/응용sw2018_1기

transition timing function

moozi 2018. 4. 10. 14:35

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 50px;

    background: red;

    color: white;

    font-weight: bold;

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

    transition: width 2s;

    margin-bottom:5px;

}


/* 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;}


#box1:hover div{

    width: 300px;

}

</style>

</head>

<body>

<h1>The transition-timing-function Property</h1>


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


<div id="box1">

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

</div>




</body>

</html>



'TIS_2018 > 응용sw2018_1기' 카테고리의 다른 글

ajax연습문제01  (0) 2018.04.11
jQuery연습문제  (0) 2018.04.10
jQuery mouseWheel 이벤트  (0) 2018.04.10
Oracle Explain Plan  (0) 2018.04.09
4/6 gallery01.html  (0) 2018.04.06
'TIS_2018/응용sw2018_1기' Related Articles more
Comments