CSS transition Animation 트랜지션 애니메이션 속성 및 사용 방법
오늘은 정말로 유익한 내용을 배웠습니다. CSS 스타일에서 사용할 수 있는 transition 애니메이션에 대한 사용 방법입니다. 전부터 궁금했던 부분이기도했고, 알아두면 분명 멋진 메뉴를 구성할 수 있을 듯 합니다. 참고로 모든 브라우저 버전에서 지원하는 기능은 아닙니다. 익스플로러는 최소 10 버전 이상이어야 하며 기타 크롬이라던지 파이어폭스, 사파리, 오페라의 경우도 일정 버전 이상이어야 합니다. 최신 버전으로 유지하신다면 적용은 항상 됩니다. 우선 간단한 예시를 통해서 알아보도록 하겠습니다. 먼저 html 마크업 상태를 살펴보겠습니다.
<div class="ex1">DIV1</div>
<div class="ex2">DIV2</div>
<div class="ex3">DIV3</div>
<div class="ex4">DIV4</div>
<div class="ex5">DIV5</div>
<div class="ex6">DIV6</div>
div를 총 6개 만들었습니다. 그러면 CSS 스타일 부분도 살펴보겠습니다.
/*RESET*/
* { margin: 30px; padding: 0; }
body { font: 17px 'Nanum Gothic', sans-serif; }
a { text-decoration: none; color: #404040; }
li { list-style: none; }
/*BODY*/
div {
width: 100px;
height: 100px;
background: #777;
}
div:hover {
width: 200px;
height: 200px;
font-size: 30px;
color: red;
letter-spacing: 15px;
background: yellow;
}
.ex1 {
transition: width 0.5s; /*가로 사이즈만 적용*/
}
.ex2 {
transition: background 0.5s; /*백그라운드만 적용*/
}
.ex3 {
transition: color 0.5s; /*폰트 색상만 적용*/
}
.ex4 {
transition: letter-spacing 0.5s; /*자간만 적용*/
}
.ex5 {
transition: all 0.5s; /*모든 요소 적용*/
}
.ex6 {
transition: all 0.5s 1s; /*모든 요소 적용 + 1초 딜레이*/
}
보시면 div의 기본 가로 및 세로 크기가 정해져 있음을 알 수 있고, 배경색상도 들어 있음을 살펴볼 수 있습니다. 그리고 만들어진 기본 div위에 마우스가 올라갔을 경우에 가로 및 세로 크기가 두배로 커지는 것을 확인할 수 있습니다. 폰트 크기도 커지며 폰트 색상도 빨간색으로 바뀝니다. 자간도 15px 만큼 벌어집니다. 백그라운드 색상도 노란색으로 변경됨을 확인할 수 있습니다.
각 div에 class 값을 넣었고, 각 클래스마다 transition 속성이 조금씩 다른데, 주석으로 간단하게 설명을 넣었습니다. 어떻게 변하는지 한번 아래에서 직접 마우스로 올리면서 차이를 경험해 보시기를 바랍니다.
See the Pen transition basic by rgy0409 (@rgy0409) on CodePen.
어떤 차이가 있는지 보이시나요? css에 마크업 되어 있는 transition 속성 중, 앞 부분에 대해서 특정 요소만 따로 선택하여 해당 요소를 정해준 시간만큼 변화를 마치 플래시 키프레임의 변화처럼 애니메이션 효과를 부여할 수 있습니다. 특정 요소 하나하나에 부여하기가 싫고, 모든 요소의 변화에 대해서 마크업을 하고 싶다면 all 을 사용하시면 되는 것 입니다. 그리고 딜레이를 주고 싶다면 시간을 두 번 마크업 하시면 되며 마지막 시간이 딜레이 시간으로 인식됩니다. 이 방법을 응용하시면 이렇게 멋진 메뉴도 CSS로 간단하게 만들수도 있습니다.
See the Pen transition Menu li by rgy0409 (@rgy0409) on CodePen.
이 메뉴에 대한 마크업은 위에서도 HTML과 CSS 버튼을 눌러서 확인하실 수 있으며, 한 눈에 살펴보시려면 아래를 봐주시면 되시겠습니다.
<h2>MainMenu</h2>
<ul class="menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
h2, ul {
padding: 20px, 0;
}
.menu li a {
display: block;
width: 300px;
height: 20px;
padding: 10px;
margin-bottom: 5px;
text-transform: uppercase;
color: #123456;
background: #abc;
transition: all 0.3s;
/*transition: width 0.3s, color 0.5s 1.2s, background 0.2s 1.2s;*/
/*color 의 경우 0.5s 는 duration 변화시간, 1.2s 는 delay 시간임*/
/*all 대신에 background, width, height, color 등등을 넣을 수 있음*/
}
.menu li a:hover {
width: 350px;
letter-spacing: 15px;
text-indent: 10px;
color: #fff;
background: #0C2A49;
}
텍스트에도 적용이 되며 이미지에도 적용이 됩니다. transition Animation 요소를 활용하시어 자신만의 멋진 스타일을 구현해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
