지난 포스트에서 요소를 변형시키는 transform을 배웠다.
이번에는 그 변화의 과정을 부드러운 움직임으로 바꿔주는 transition 속성을 정리해 보겠다.
이전 포스트
CSS transform 속성 정리: 요소를 회전하고 비트는 효과
생활코딩 CSS 수업 영상: transition
그동안 중간에 잠깐씩 등장했던 transition 속성을 드디어 제대로 다루는 영상이다.
transition은 CSS 속성값이 변할 때 그 변화를 일정한 시간 동안 부드럽게 이어주는 애니메이션 효과다.
마우스를 클릭하거나 올리는 등의 이벤트가 발생할 때, 결과값이 즉각적으로 나타나지 않고 눈에 보이는 '과정'을 만들어주는 역할을 하는 것이다.
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 3rem;
display: inline-block;
/* transition-property: all;
transition-duration: 0.5s; */
transition: all 0.5s;
}
a:active {
transform: translate(20px, 20px);
font-size: 2rem;
}
</style>
</head>
<body>
<a href="#">Click</a>
</body>
</html>위의 생활코딩 수업 영상에서 사용한 코드를 약간 수정했다.
display: inline-block;: 원래<a>태그는inline요소다.inline요소는transform(이동, 회전 등) 속성이 제대로 적용되지 않는 특성이 있다. 요소를inline-block으로 바꿔줌으로써 글자처럼 한 줄에 있으면서도, 동시에 박스 모델의 성질을 갖게 하여transform애니메이션이 정상적으로 작동하도록 만든다.transition-property: all;: 애니메이션을 적용할 대상을 정한다.all은 배경색, 크기, 위치 등 변화가 일어나는 모든 속성에 애니메이션을 적용하겠다는 뜻이다.transition-duration: 0.5s;: 애니메이션이 완성되기까지 걸리는 시간이다. 0.5s는 0.5초를 의미하며, 이 시간 동안 부드러운 변화가 일어난다.transition: all 0.5s;: 주석 처리된 여러 줄의transition속성을 한 줄로 합쳐서 쓸 수 있다. 코드가 훨씬 간결해진다.
transition 축약 속성 작성법의 기본 순서는 다음과 같다.
transition: [속성] [시간] [타이밍 함수] [지연 시간];여기서 '타이밍 함수'와 '지연 시간'은 무엇인지 다음 영상에서 알아보자.
지연 시간Delay은 이벤트가 발생한 후 애니메이션이 실제로 시작되기까지 기다리는 시간이다.
예를 들어 transition-delay: 1s;라고 설정하면, 마우스를 올리거나 클릭한 직후가 아니라 정확히 1초가 지난 뒤부터 움직임이 시작된다.
여러 요소가 순차적으로 나타나는 계단식 효과(Stagger effect)를 만들 때 아주 유용하게 사용된다.
타이밍 함수Timing Function는 애니메이션이 재생되는 속도의 리듬을 결정한다.
처음부터 끝까지 일정한 속도로 움직일지(linear), 시작은 느리지만 끝은 빠르게 움직일지(ease-in) 등을 설정하여 움직임을 더 자연스럽고 생동감 있게 만든다.
cubic-bezier를 사용하면 사용자만의 독특한 가속도를 직접 설계할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
transition:all 1s;
}
div {
background-color: black;
color: white;
padding: 10px;
width: 100px;
height: 50px;
transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
div:hover {
height: 400px;
}
</style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
<div>TRANSITION</div>
</body>
</html>영상 속의 복잡한 코드가 지금은 이렇게 짧아졌다.
이제 모든 최신 브라우저에서 CSS transition을 사용할 수 있게 되어서 -webkit-, -moz-, -o- 같은 것이 필요 없기 때문이다.
Ceaser - CSS Easing Animation Tool - Matthew Lein
수업 영상에서 소개한 웹사이트의 링크다.
<body onload="document.querySelector('body').style.backgroundColor='white';">자바스크립트JavaScript 코드이기 때문에 설명은 생략하려고 했는데, 짧고 정리하고 끝내겠다.
이 코드는 "웹 페이지 로딩이 끝나자마자 배경색을 흰색으로 바꿔라"라는 명령을 담은 자바스크립트 코드다.
onload: 웹 페이지에 필요한 모든 파일(이미지, 스크립트 등)이 다 불러와졌을 때 실행하라는 이벤트다.document.querySelector('body'): 현재 문서에서<body>태그를 찾아내라는 뜻이다..style.backgroundColor='white': 찾아낸 body의 배경색 스타일을 직접 'white'로 수정한다.
요약하자면, HTML이 처음 로딩될 때 CSS가 적용되지 않은 상태이거나 다른 색이었다 하더라도, 로딩 완료 직후에 강제로 배경을 흰색으로 덮어버리는 역할을 한다.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩