Web/HTML5 & CSS3
[HTML5&CSS3] 변형 속성
클리엘
2019. 12. 19. 04:24
728x90
CSS3에서는 변형 속성을 통해 간단한 애니메이션을 구현할 수 있습니다. 우선 변경 속성이 어떻게 사용되는지부터 간단하게 알아보겠습니다.
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
</style>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>위 예제는 div에 간단한 스타일을 적용한 예제입니다. 이 상태에서 div에 마우스를 올리면 색상이 변하도록 스타일을 다음과 같이 추가합니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div:hover {
background-color:black;
}
</style>그럼 div에 마우스를 올릴 때마다 색상이 검은색으로 바뀔 것입니다.
이제 애니메이션 구현을 위해 transition-duration 속성을 추가하고 값을 3s로 주겠습니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transition-duration: 3s;
}
div:hover {
background-color:black;
}
</style>이렇게 하면 div에 마우스를 올릴 때 색상이 바뀌는 건 똑같지만 3초 정도의 지연시간이 적용되어 색상이 서서히 바뀌는 걸 확인할 수 있습니다.
이와 같은 변경 속성은 다음과 같은 속성에 적용되며
| 위치관련 | top, left, bottom, right |
| 크기관련 | width, height |
| 여백관련 | margin, padding |
| 테두리 관련 | border-width, border-radius, border-color |
| 색상 관련 | color, background-color |
| 투명도 관련 | opacity |
| 변환 처리 | transform |
또한 아래와 같은 변환 속성이 사용될 수 있습니다.
| transition | 모든 transition 속성을 한꺼번에 지정 |
| transition-delay | 변환 속성이 적용되기전 지연시간을 지정 |
| transition-duration | 변환 속성 적용시간 지정 |
| transition-property | 변환 속성이 적용될 속성지정(상단 표 참조) |
| transition-timing-function | 수치 변형 함수 사용 |
여기에서 마지막 transition-timing-function은 좀 더 살펴볼 필요가 있는데 이 속성은 수치 변형 함수를 바꾸는 데 사용됩니다. 기본적으로 CSS3에서는 다음 변형 함수를 기본적으로 사용할 수 있으며
| ease |
| linear |
| ease-in |
| ease-out |
| ease-in-out |
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transition-duration: 5s;
transition-timing-function: ease;
}
div:hover {
background-color:black;
}
</style>미세한 조절이 필요한 경우 기본함수대신 cubic-bezier함수를 직접 사용할 수도 있습니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0, 2, 2, 0);
}
div:hover {
background-color:black;
}
</style>실제 변형함수를 적용했을 때 대상 객체가 어떻게 변화하는지는 설명만으로 부족하므로 직접 확인해 보시기 바랍니다.
728x90