프로그래밍/HTML&CSS
transition
하와이블루
2022. 9. 19. 22:49
728x90
transform 속성은 단순히 이동, 회전, 확대, 축소 등을 변환하는 방법이라면 transition은 하나의 스타일을 완전히 다른 스타일로 바꾸는 방법이다. 스타일을 바꾸는 동안의 시간을 조절하여 애니메이션 효과를 줄 수 있다.
transition 구성
transition: property timing-function duration delay| 종류 | 설명 |
| property | 요소에 추가할 전환 효과를 설정 |
| timing-function | 전환 효과의 값을 설정 |
| duration | 시간동안 전환 효과를 나타냄 |
| delay | 시간만큼 대기하다가 전환효과를 나타냄 |
timing-function 속성값
| 종류 | 설명 |
| linear | 처음부터 끝까지 일정한 속도 |
| ease-in | 느리게 시작 |
| ease-out | 느리게 마무리 |
| ease-in-out | 전환 효과가 천천히 시작하고 빨라지고 천천히 마무리 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<style>
div{
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
#border-tr{
background-color: deeppink;
border: 3px solid black;
transition: all linear 1.5s;
}
#border-tr:hover{
background-color: pink;
border: 3px dotted black;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="border-tr"></div>
</body>
</html>
박스에 마우스를 가져다 대면 아래 그림과 같은 형태로 1.5초 동안 변화하는 것을 볼 수 있다.
728x90