정해진 시간동안 부드럽게 변화가 일어남
transition
transition-property : 전환 효과
transition-duration : 전환이 지속될 시간
transition-timing-function : 전환효과의 시간당 속도
transition-delay : 전환이 일어나기 전까지의 시간
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 100px; height: 100px;
background-color: orange;
-ms-transition-duration : 2s; /* IE */
-moz-transition-duration : 2s; /* 파이어폭스 */
-o-transition-duration : 2s; /* 오페라 */
-webkit-transition-duration : 2s; /* 크롬, 사파리 */
}
.box:hover{
width: 200px; height: 200px;
}
.box:active {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
'Web > CSS' 카테고리의 다른 글
| 반응형 웹(미디어 쿼리) (0) | 2020.07.14 |
|---|---|
| CSS 애니메이션 속성(animation) (0) | 2020.07.14 |
| 그라데이션 사이트 (0) | 2020.07.14 |
| CSS 리스트 속성 (0) | 2020.07.14 |
| CSS 위치 속성(position) (0) | 2020.07.13 |