[CSS3] 요소 애니메이션 이벤트 transition, transform 속성 살펴보기

[CSS3] 요소 애니메이션 이벤트 transition, transform 속성 살펴보기

 

 

예제 이미지 화면은 클릭해야 보입니다.

 

 

transition

 

트랜지션은 CSS 속성이 변할 때, duration (변화하는 시간)을 지정하여 일정 시간동안 변화를 나타내는 것

 

transition-duration : 변화하는 시간 (default: 0s)
transition-delay : 시작 전 대기 시간 (default: 0s)
transition-timing-function : 움직임을 조절 (defulat: ease) (linear / ease-in / ease-out / ease-in-out)
transition-property : 트랜지션을 적용할 속성 명시 (default: all)

 

transition : 위에 모든 속성을 축약하여 적용 가능하며, 여러개의 프로퍼티를 입력 시 쉼표(,)로 구분지어 연속적으로 적용 할 수 있다.

 

---

transition을 사용하지 않은 경우와 비교하여 간단하게 살펴보자.

 

 

<div class="transition-wrap">
	<div class="box">ease</div>
	<div class="box">linear</div>
	<div class="box">ease-in</div>
	<div class="box">ease-out</div>
	<div class="box">ease-in-out</div>
</div>

 

.transition-wrap {
	padding: 10px;
	border: 1px solid #ccc;
}
.transition-wrap .box {
	height: 100px;
	width: 100px;
	background-color: green;
	transition-property: background-color;
	color: #fff;
	text-align: center;
	line-height: 100px;
}

기본적으로 보기 좋게하기 위한 css 코드이다.

 

 

 

여기서 각 ".box" div에 마우스 호버 이벤트를 다음과 같이 width가 100%, 색상을 입혀줄 것이다.

 

.transition-wrap .box:hover:nth-child(1) {
	background-color: orange;
	width: 100%;
}
.transition-wrap .box:hover:nth-child(2) {
	background-color: blue;
	width: 100%;
}
.transition-wrap .box:hover:nth-child(3) {
	background-color: red;
	width: 100%;
}
.transition-wrap .box:hover:nth-child(4) {
	background-color: violet;
	width: 100%;
}
.transition-wrap .box:hover:nth-child(5) {
	background-color: brown;
	width: 100%;
}

 

 

transition 속성 사용하지 않은 화면

 

 

 

 

이번에는 transition 속성을 사용하여 위와같은 동작을 더 부드럽게 구현할 수 있도록 위 코드에서 transition 속성만 추가해보겠다.

 

.transition-wrap .box {
	transition: width 1s;
}

위 코드 .transition-wrap .box 에 추가하면 된다.

 

 

 

transition 속성 사용한 화면

 

 

 

 

 

 

그렇다면 추가로 transition-timing-function 은 어떤 효과인가?

 

동작이 실행되는 시작, 중간, 끝 타이밍에 대한 속도라고 생각하면 더 이해가 빠를 것이다.

 

 

.transition-wrap .box:nth-child(1){
	transition-timing-function: ease;
}
.transition-wrap .box:nth-child(2){
	transition-timing-function: linear;
}
.transition-wrap .box:nth-child(3){
	transition-timing-function: ease-in;
}
.transition-wrap .box:nth-child(4){
	transition-timing-function: ease-out;
}
.transition-wrap .box:nth-child(5){
	transition-timing-function: ease-in-out;
}

비교하기 위해 transition-timing-function 속성을 각 박스 별로 추가했다.

 

 

 

 

ease : cubic-bezier( 0.25, 0.1, 0.25, 1 ) 는 기본 값이며, 천천히 시작하여 중간에 느려졌다가 빨라진다.

linear : cubic-bezier( 0, 0, 1, 1 )과 같으며, 일정하게 움직인다

ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같으며, 나중에 빨라진다.

ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같으며, 빠르게 시작해서 나중에 느려진다.

ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같다.

 

 

 

 

 

---

 

 

 

 

transform

 

변환 함수를 사용하여 요소에 변환을 준다.

 

translate(x, y) : x축 y축으로 요소를 이동
scale(x, y) : 수평 수직으로 크기를 조절
skew : 기울기 조절
rotate : 회전 각을 조절

transform-origin : 요소의 기준점을 변경한다.

---

예제를 통해서 transition과 transform 속성이 어떻게 사용되는 지 살펴보자.

 

 

transform 속성별로 살피기 위해 각각의 div를 생성한다.

 

<div class="transform-box">
	<div class="translate">translate</div>
	<div class="scale">scale</div>
	<div class="skew">skew</div>
	<div class="rotate">rotate</div>
</div>

 

보기좋게 기본 css 를 입혀준다.

 

/* 전체 테두리 스타일 지정 */
.transform-box {
	padding: 20px;
	border: 1px solid #ccc;
}
/* 박스 내 div 요소 스타일 지정 */
.transform-box div {
	/* div 박스 크기 스타일 지정 */
	width: 100px;
	height: 100px;
	/* div 박스 꼭지점 둥글게 지정 */
	border-radius: 10px;
	/* div 내 텍스트 스타일 지정(색상 및 가운데정렬) */    
	color: #fff;
	text-aling: center;
	line-height: 100px;
}

 

 

 

translate

 

translate(x, y) 는  x축 y축으로 요소를 이동한다.

 

.transform-box .translate{
	background-color: blue;
	transition: transform .3s linear;
}
.transform-box .translate:hover {
	transform: translate(500px, 10px);
}

 

표현방법은 다음과 같다.

- transform: translate(10px);

- transform: translate(10px, 10px);

- transform: translateX(10px) translateY(10px);

 

 

 

 

 

scale

 

scale(x, y) 은 수평 수직으로 크기를 조절한다.

 

.transform-box .scale{
	background-color: green;
	transition: transform .3s linear;
}
.transform-box .scale:hover {
	transform: scale(2);
}

 

 

표현방법은 다음과 같다.

- transform: scale(2);

- transform: scale(2, 2);

- transform: scaleX(2) scaleY(2);

 

 

 

 

 

skew

 

skew는 기울기 조절한다.

 

.transform-box .skew{
	background-color: orange;
	transition: transform .3s linear;
}
.transform-box .skew:hover {
	transform: skew(45deg);
}

 

 

 

 

rotate

rotate는 회전 각을 조절한다.

 

.transform-box .rotate{
	background-color: orchild;
	transition: transform 1s ease;
	transform-origin: center;
}
.transform-box .rotate:hover {
	transform: rotate(-360deg);
}

 

- transform-origin: 요소의 기준점을 변경할 수 있다.

 

 

 

 

 

 

만약 transform 속성으로 여러가지 동작을 한번에 사용하고 싶다면,  띄어쓰기를 구분하여 원하는 속성을 넣으면 된다.

 

transform: rotate(-360deg) scale(3);