Html&CSS/html5&css3
0227_html5/css3_transition
.Epona.
2020. 3. 4. 04:13
[ transition ] 자연스러운 변화
transition
코드 보기 [더보기] 선택
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0227_css3_transition</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/*[ transition ] 자연스러운 변화 */
.transition{ width:100px; height:100px; background-color: green;
transition:width 2s ease-in 1s } /*2초 대기 후, 느리게 2의 속도로 width가 500px로 바뀜*/
/* transition:바뀔대상요소(target) , 지속속도(s) ,효과 ,정지(대기)시간(s) */
/* ease:: 시작은 느리고 끝은 빠르게 진행 */
/* ease-in:: 느린 시작 */
/* ease-out:: 느린 끝 */
/* ease-in-out:: 느린 시작, 느린 끝 */
/* linear:: 처음부터 끝까지 같게 */
.transition:hover{ width: 500px;}
</style>
</head>
<body>
<h3> [ transition ] 자연스러운 변화 </h3>
<div class="transition">transition</div>
</body>
</html>