transition: 으로 애니매이션 효과를 적용 할 수 있다.
예시로 가로 세로 200px 인 네모 상자 위에 커서를 둘경우 3초에 걸쳐 동그라미로 변하게 되고
커서를 내릴경우에 다시 네모로 변하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>loui3</title>
<style>
.circle {
width: 200px;
height:200px;
background-color:aqua;
transition: 3s;
}
.circle:hover {
border-radius:50%
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
추가로 알면 좋은 것들
transition-timing-function: linear 일정한 속도로 변화한다.
transition-timing-function: ease-in 천천히 시작하다 빨라지며 변화한다
transition-timing-function: steps(6,end) 6단계에 걸쳐 변한다.
transition-timing-function: cubic-bezier 앞뒤로 움직이는것처럼 변한다.
관련사이트!
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
easings.net
'WEB > CSS3' 카테고리의 다른 글
| 06-02. 미디어 쿼리 (0) | 2023.01.04 |
|---|---|
| 06-01. Flexbox (0) | 2023.01.04 |
| 05-01. css3 테두리와 투명도 (0) | 2022.12.26 |
| 04-01. 레이아웃 (0) | 2022.12.19 |
| 03-02. 위치 속성 (0) | 2022.12.18 |
