[HTML5&CSS3] 변형 속성

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

저작자표시 비영리 변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 2차원 구현 (0)	2020.01.10
[HTML5&CSS3] 키 프레임(keyframes)을 통한 애니메이션 구현 (0)	2019.12.25
[HTML5&CSS3] 스프라이트(Sprite) 이미지 (0)	2019.12.18
[HTML5&CSS3] 뷰포트(viewport) (0)	2019.12.17
[HTML5&CSS3] 벤더 프리픽스(vendor prefix) (0)	2019.12.05

'Web > HTML5 & CSS3' 카테고리의 다른 글

티스토리툴바