728x90
반응형
SMALL
트랜지션 (Transition)
CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다.
html
<!DOCTYPE html>
<html>
<head>
<title>Transitions & Animation</title>
<style>
#box1 {
width: 100px;height: 100px;
background: #000000;
transition: width 2s, height 4s;
transition-timing-function: linear;
}
#box1:hover {
width: 300px;
height: 300px;
}
#box2 {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: colorchange;
animation-duration: 5s;
}
@keyframes colorchange {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: green;
left: 200px;
top: 200px;
}
75% {
background-color: blue;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
728x90
반응형
LIST
'Programming > Website' 카테고리의 다른 글
| [Website] 부트스트랩 (Bootstrap) (0) | 2023.06.01 |
|---|---|
| [Website] Columns / TextBox / Flexbox (0) | 2023.05.26 |
| [Website] 그림자 (Shadows) (0) | 2023.05.26 |
| [Website] 그레디언트 (Gradients) (0) | 2023.05.26 |
| [Website] 가상 클래스 (Pseudo Classes) (0) | 2023.05.26 |
