트렌지션 효과(Transition Effect)
: 시간 경과에 따른 박스모델의 스타일 변경 기능 제공
transition-property : 트렌지션 효과를 제공할 스타일을 속성값으로 설정
transition-duration : 트렌지션 효과의 제공 시간(효과가 나타나는데 걸리는 시간)을 속성값으로 설정
transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정
→ 속성값
- ease(기본값) : 느리게 시작하여 점점 빨라졌다 느려지면서 종료
- linear : 시작부터 종료까지 일정하게
- ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히
- ease-out : 빠르게 시작해서 점점 느려짐
- ease-in-out : 느리게 시작하여 빨라지다가 느려지면서 종료
- cubic-bezier
https://esings.net 사이트 참조
transition-delay : 트렌지션 효과의 지연 시간을 속성값으로 설정 - 단위 : s(초)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#shape div {
width: 100px;
height: 100px;
background: red;
border-radius: 0;
transition-property: background border-radius;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 0.5s;
}
#shape div:hover { /* div 태그에 마우스 커서가 위치했을 떼 */
background: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>트렌지션 관련 스타일 속성</h1>
<hr>
<p>도형 위에 마우스 커서를 올려보세요.</p>
<div id="shape">
<div></div>
</div>
</body>
</html>
마우스 커서를 올리면 서서히 원으로 변한다.
opacity
: 박스모델 투명도 관련 스타일 속성
→ 속성값 : 0.0(투명) ~ 1.0(불투명)
transition
: 트렌지션 관련 모든 스타일 속성값 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
#images img {
margin: 20px;
opacity: 0.5;
}
#images img:hover {
transform: scale(1.2, 1.2);
opacity: 1.0;
transition: all 1s; /* 즉각적으로 반응하지 않고, 서서히 반응 */
}
#shape div {
width: 100px;
height: 100px;
background: url("images/f1.png") no-repeat center;
position: relative;
left: 0;
transition: all 2s;
}
#shape div:hover {
background: url("images/f2.png") no-repeat center;
left: 600px;
}
</style>
</head>
<body>
<h1>트렌지션 관련 스타일 속성</h1>
<hr>
<div id="images">
<img alt="펜션 이미지1" src="images/1.jpg">
<img alt="펜션 이미지2" src="images/2.jpg">
<img alt="펜션 이미지3" src="images/3.jpg">
</div>
<hr>
<div id="shape">
<div></div>
</div>
</body>
</html>
마우스 커서를 올리면 사진이 불투명해지면서 커진다
'학원 > 복기' 카테고리의 다른 글
| [JavaScript] 자바스크립트란? / window.alert() / console.log() (0) | 2023.06.01 |
|---|---|
| [CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인 (0) | 2023.06.01 |
| [CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성 (0) | 2023.06.01 |
| [CSS] 박스모델(BoxModel) 관련 속성 (0) | 2023.05.30 |
| [CSS] 배경 관련 스타일 속성 (0) | 2023.05.30 |
