○ 트랜지션 (Transition)
- 속성의 스타일이 변하는 속도를 조절
- 이벤트에 의해 발생함
- transfrom과도 같이 사용 가능 (08. CSS Transform 참고)
- 형식 : transition: (속성) 시간 (변화효과) ;
<html>
<head>
<title>Transition</title>
<style>
#sq {background-color: cadetblue;
position: relative;
width: 200px;
height: 200px;
text-align: center;
margin: auto; /* 수평을 기준으로 가운데 정렬 */
cursor: pointer; /* 마우스 올렸을 때 커서 손모양 */
}
#sq:hover {
transform: rotate(80deg);
background-color: deeppink;
transition: 1s ease; /* 시간 변화효과 */
}
#sqval {background-color: antiquewhite;
position: relative;
width: 100px;
height: 200px;
border-radius: 20px;
margin: auto;
text-align: center;
transition: width .5s linear; /* 속성 시간 변화효과 */
}
#sqval:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="sq">마우스를 올리면 시계방향 80도 회전&색변화(1초동안)</div>
<div id="sqval">마우스를 올리면 너비가 300px로 변화(0.5초동안)</div>
</body>
</html>
○ Animation
- 트랜지션과 비슷하게 속성의 스타일을 변화하게 하지만 보다 세부적으로 조절 가능
- 이벤트 없이 시작, 정지, 반복을 조절가능함
- 형식 : @keyframes 애니메이션이름 {
from {애니메이션 시작 스타일}
to {애니메이션 끝 스타일}
}
<html>
<head>
<title>Animation</title>
<style>
#testdiv {
width: 100px;
height: 100px;
background-color: burlywood;
animation: testani 5s infinite;
animation-timing-function: linear;
position: relative;
left:0px;
}
@keyframes testani {
from {width: 100px}
to {width: 500px}
}
</style>
</head>
<body>
<div id="testdiv">5초동안 너비가 100px에서 500px로 변화 (infinite:계속반복)</div>
</body>
</html>
○ timing-function
- 시간의 흐름에 따라 변화하는 속도 다르게 줄 수 있음
- transtion과 animation에 모두 적용가능
- 형식: transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out ;
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out ;
- linear : 계속 일정한 속도
- ease : 천천히 시작해서, 중간에 빨라졌다가, 천천히 끝남 (기본)
- ease-in : 천천히 시작
- ease-out : 천천히 끝남
- ease-in-out : 천천히 시작해서, 천천히 끝남
'Frontend > CSS' 카테고리의 다른 글
| 10. CSS RWD(Responsive Web Design) & Media Queries (0) | 2022.04.08 |
|---|---|
| 08. CSS Transform (0) | 2022.04.06 |
| 07. CSS display 속성 (0) | 2022.04.01 |
| 06. CSS Positioning (float, z-index) (0) | 2022.03.31 |
| 05. CSS Positioning (position 속성) (0) | 2022.03.30 |
댓글