다연이네

[days05] CSS 전환 - transition 본문

Web/CSS

[days05] CSS 전환 - transition

　다연　 2020. 12. 9. 13:44
반응형

 CSS 전환 - transition 속성


1. 주어진 기간(시간)동안 속성 값을 매끄럽게 변경하는 작업
2. CSS 전환 관련 속성
     ㄱ. transition : 속성 지속기간 전환속도 곡선 연기시간
     ㄴ. transition-property : width 속성
     ㄷ. transition-duration : 2s      지속시간
     ㄹ. transition-timing-function : ease   전환속도곡선
         - ease(기본값) : 느리게 시작, 빠르게 천천히 종료하는 전환효과 
         - linear : 등속(처음~끝) 동일한 속도 전환효과
         - ease-in : 느린시작으로 전환효과
         - ease-out : 느린 끝 전환효과
         - ease-in-out : 느린 시작, 느린끝, 하지만 중간은 빠름
     ㅁ. transition- delay : 1s 연기시간

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div{
	width: 100px;
	height: 100px;
	background: red;
	
	/* transform 속성: 크기, 위치이동, 기울기, 회전 변환 */
	/* transition 매끄럽게 변경-전환 
		전환할때는 두가지 지정 - 효과를 추가할 CSS 속성, 효과 기간(시간)*/
		transition: width 2s, height 4s ease 2s;
						/* ease: 젼환속도곡선 */
}
div:hover {
	width: 300px;
	height: 300px;
}
</style>

</head>
<body>

<div></div>
</body>
</html>

 

 

전환(transition) + 변환(transform)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div{
	width: 50px;
	height: 50px;
	background: red;
	margin: 2px;
	display: inline-block;
	/* 전환 */
	transition: width 2s linear, height 2s ease, transform 2s;
}
div:hover{
	width: 100px;
	height: 100px;
	
	/* 변환(회전)- 2D */
	transform: rotate(360deg);
}
</style>

</head>
<body>
<h3>전환+변환</h3>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기  (0) 2020.12.09
[days05] CSS 애니메이션  (0) 2020.12.09
[days05] CSS 3D 변환 - transform  (0) 2020.12.09
[days04] 1) @font-face 2) 2D 변환 방법  (0) 2020.12.08
[days04] 텍스트 효과( text-overflow, word-wrap/break)  (0) 2020.12.08
'Web/CSS' Related Articles more
Comments