CSS
트랜지션
트랜지션
트랜지션을 사용해 애니메이션처럼 여러 CSS속성을 적용해 가면서 시각적으로 엘리먼트가 변화하는 기능을 구현할 수 있습니다.
해당 태그에 마우스 커서를 올려야 작동합니다.
사용하는 속성은 transition입니다..
다음의 박스에 마우스의 커서를 올려보세요.
transition 사용 방법
선택자{transition:적용할 CSS 속성, 지속 시간, 표현효과종류}
선택자:hover{transition에 사용할 속성}
위 코드에서 선택자:hover 이부분은 커서를 올렸을 때 실행할 CSS 속성을 입력합니다.
다음은 위 사용방법에 대한 설명입니다.
지속시간 : transition 효과가 적용될 시간
표현 효과 종류 : 어떤 속도로 적용할 것인지 작성합니다.
linear : 일정한 속도
ease : 느리게 -> 빠르게 -> 느리게
ease-in : 시작 시 느리게
ease-out : 종료 시 느리게
transition에 사용할 속성 : transition을 적용할 CSS 속성을 작성합니다.
그럼 앞에서 학습했던 각도 조정 예제를 좀 더 효과적으로 어떻게 변하는지 확인해 볼게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>박스 각도 변경</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.transform{width:100px;height:100px;margin:50px;background:pink;transform:rotateX(0deg);transition:all 5s linear}
.transform:hover{transform:rotateX(50deg)}
</style>
</head>
<body>
<div class="transform"> pinkcoding </div>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위 코드의 결과에서 transition:all 에 대해서 더 볼게요. all은 :hover에 작성된 모든 속성을 적용해라 입니다.
다음의 예제에서 여러 CSS 속성을 지정하고 width만 작동하도록 한다면 width만 트랜지션 효과가 발생하고 나머지는 커서를 올리자마자 바로 해당 CSS가 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>박스 각도 변경</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.transform{width:100px;height:100px;margin:50px;background:pink;
transform:rotateX(0deg);transition:width 5s linear}
.transform:hover{transform:rotateX(50deg);width:400px}
</style>
</head>
<body>
<div class="transform"> pinkcoding </div>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
위 코드의 결과를 보면 width는 5초동안 일정하게 400px까지 도달하지만 transform:rotateX는 바로 적용이 되어버리죠.
다수의 CSS를 트랜지션에 적용한다면 다음과 같이 할 수 있어요.
다음은 background 속성을 8초간 시작 시 느리게 작동하도록 했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>박스 각도 변경</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.transform{width:100px;height:100px;margin:50px;background:pink;
transform:rotateX(0deg);transition:width 5s linear, background 8s ease-in}
.transform:hover{transform:rotateX(50deg);width:400px;background:hotpink}
</style>
</head>
<body>
<div class="transform"> pinkcoding </div>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
