트랜지션
트랜지션을 사용해 애니메이션처럼 여러 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:skyblue;transform:rotateX(0deg);transition:all 5s linear} .transform:hover{transform:rotateX(50deg)} </style> </head> <body> <div class="transform"> coreasur </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:skyblue; transform:rotateX(0deg);transition:width 5s linear} .transform:hover{transform:rotateX(50deg);width:400px} </style> </head> <body> <div class="transform"> coreasur </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:skyblue; 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"> coreasur </div> </body> </html>