728x90
반응형
08_timingFunction.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transition timing function</title>
<style>
@import "../css/08_timingFunction.css";
</style>
</head>
<body>
<div id="ex">
<div class="ease">ease</div>
<div class="ease-in">ease-in</div>
<div class="ease-out">ease-out</div>
<div class="ease-in-out">ease-in-out</div>
<div class="linear">linear</div>
</div>
</body>
</html>
08_timingFunction.css
@CHARSET "UTF-8";
#ex div{
float: left;
width: 100px;
height: 50px;
margin: 5px 10px;
padding: 5px;
color: white;
background-color: #006aff;
border-radius: 5px;
text-align:center;
font-weight: bold;
}
#ex:hover div{
height: 400px;
}
#ex .ease{
transition: 3s ease; /*같은 속도 유지*/
}
#ex .ease-in{
transition: 3s ease-in;/*시작은 느리게*/
}
#ex .ease-out{
transition: 3s ease-out;/*마지막은 느리게*/
}
#ex .ease-in-out{
transition: 3s ease-in-out;/*시작은 느리게, 마지막은 느리게*/
}
#ex .linear{
transition: 3s linear; /*시작은 느리게, 점점 빨라지게, 마지막은 느리게*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] nth-child (n번째부터 n번째까지 css적용) (0) | 2017.11.14 |
|---|---|
| [CSS] ch05-09. ani (0) | 2017.08.28 |
| [CSS] ch05-07. transition2 (0) | 2017.08.28 |
| [CSS] ch05-06. transition (0) | 2017.08.28 |
| [CSS] ch05-04. skew (0) | 2017.08.28 |