이번 장에서는 transition에 대해서 알아보도록 하겠습니다. transition이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말합니다. 여러 속성들은 차근차근 살펴보도록 하고 가벼운 예제를 통해 transition이 무엇인지 경험해 보도록 하죠.
Web Animation 1부 css Animation
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
가로, 세로 100px에 빨강 배경색을 가진 div가 하나 있습니다. div에 마우스를 옮기게 되면 가로, 세로 300px에 파랑 배경색을 가진 div로 변하게 되는 걸 확인할 수 있습니다.
여기서 style에 코드 한 줄만 추가해볼까요? 지금은 이 코드가 무엇을 의미하는지 모르셔도 됩니다.
transition: all 2s;
그 결과,
즉시 변경되면 속성값들이 시간을 두고 천천히 바뀌는 걸 확인할 수 있습니다. 애니메이션처럼 말이죠. 이것이 바로 transition의 마법입니다. transition에 대해 함께 더 알아보도록 합시다.
Web Animation 1부 css Animation