HTML & CSS #13 : CSS 애니메이션

변화(transform)

특정 요소의 크기나 형태 등 스타일이 변경되는 것

 

스타일시트에서는

수평과 수직으로 웹 요소를 변형시키는 2차원 변형과 

z축을 더한 3차원 변형이 있다.

 

---

translate 함수

지정한 방향으로 이동할 거리를 지정하여 해당 요소를 이동시키는 함수이다.

transform: translate(tx, ty)

transform: translateX(tx)

transform: translateY(ty)

transform: translateZ(tz)

transform: translate3d(tx, ty, tz)

사진출처 : pixabay

호버기능을 활용하여 translate함수를 적용시켜보았다. 

.movex:hover {
	transform: translateX(50px);
}

.movey:hover {
	transform: translateY(20px);
}

.movexy:hover {
	transform: translate(10px, 20px);
}

 

 

 

scale 함수

지정한 크기만큼 요소를 확대/축소하는 함수 

즉, 크기를 변경시키는 함수이다. 

transform: scale(sx, sy)

transform: scaleX(sx)

transform: scaleY(sy)

transform: scaleZ(sz)

transform: scale3d(sx, sy, sz)

 

scale함수 사진출처: pixabay

.scalex:hover {
	transform: scaleX(1.2);
}

.scaley:hover {
	transform: scaleY(1.5);
}

.scale:hover {
	transform: scale(0.7);
}

 

 

rotate 함수

웹 요소를 각도를 지정하여 회전시키는 함수

각도(단위 deg) 혹은 라디안 값을 매개변수로 사용한다.

transform: rotate(각도)

 

transform: rotate(rx, ry, 각도)

transform: rotateX(각도)

transform: rotateY(각도)

transform: rotateZ(각도)

transform: rotate3d(rx, ry, rz, 각도)

 

rotate함수 사진출처 : pixabay

.rotate1:hover {
	transform: rotate(20deg);
}

.rotate2:hover {
	transform: rotate(-40deg);
}

rotate함수 3차원 적용 사진출처 : pixabay

.rotatex {
	transform: rotateX(45deg);
}

.rotatey {
	transform: rotateY(45deg);
}

.rotatez {
	transform: rotateZ(45deg);
}

.rotatexyz {
	transform: rotate3d(2.5, 1.2, -1.5, 45deg);
}

 

 

skew 함수

지정한 각도만큼 비틀어 요소를 왜곡시키는 함수 

즉, 끌어당기는 함수이다. 

transform: skew(ax, ay)

transform: skewX(ax)

transform: skewY(ay)

skew함수 사진출처: pixabay

.skewx:hover {
	transform: skewX(30deg);
}

.skewy:hover {
	transform: skewY(15deg);
}

.skewxy:hover {
	transform: skew(-25deg, -15deg);
}

 

transform-origin 속성

기준을 특정 지점으로 설정하는 속성

 

transform-origin : <x축> <y축> <z축> | initial | inherit ;

x축에는 left, center, right, 백분율, 길이 값

y축에는 top, center, bottom, 백분율, 길이 값

z축에는 길이값

을 사용할 수 있다.

 

transform-origin 속성 사진출처: pixabay

.puppy {
	transform: rotateZ(10deg);
}

.ltop .puppy {
	transform-origin: left top;
}

.rtop .puppy {
	transform-origin: right top;
}

.lbottom .puppy {
	transform-origin: left bottom;
}

.rbottom .puppy {
	transform-origin: right bottom;
}

 

perspective 속성

원근감을 갖는 속성

양수여야 하며, 값이 클수록 원근감이 느껴진다.

perspective-origin은 입체적으로 표현할 요소의 bottom 위치를 지정하는 속성이다. (좀 더 높은 곳에서 원근감을 조절하는 느낌이 든다.)

transform: perspective (사진 출처 : pixabay)

#pers {
	transform: perspective(300px) rotateX(45deg);
}

#no-pers {
	transform: rotateX(45deg);
}

공부하는 교재에 perspective를 속성값으로가 아닌 속성으로 코드에 적혀 있어서 

실행할 때 꽤 고생을 했다. 

위의 코드와 같은 형식으로 하니 잘 작동이 된다!

 

 

---

transition 트랜지션

웹 요소의 스타일 속성이 조금식 시간을 두고 자연스럽게 바뀌는 것!

 

transition-property  속성

트랜지션을 적용할 속성을 선택하는 속성

속성값은 all, none, 속성 이름

 

transition-duration  속성

트랜지션의 진행 시간을 지정하는 속성

단위는 초(s) 혹은 밀리초(ms)이며, 트랜지션이 여러개이면 쉼표로 구분해 지정해준다.

transition

<style>
.tr1 {
	width: 100px;
	height: 100px;
	background-color: blue;
	border: 1px solid black;
	transition-property: width, height;
	transition-duration: 2s, 1s;
}

.tr1:hover {
	width: 200px;
	height: 120px;
}
</style>

 

transition-timing-function 속성

트랜지션의 시작과 중간, 끝의 속도를 지정해주는 속성

linear : 똑같은 속도

ease (=ease-in-out) : 천천히 시작해 점점 빨라지다가 천천히 끝나는 값 (ease가 기본값)

ease-in : 시작을 느리게

ease-out : 끝을 느리게

cubic-bezier(n, n, n, n) : 직접 정의 n은 0~1 사이의 값

 

transition-delay 속성

트랜지션이 언제부터 시작되는지 지연 시간을 지정하는 속성.

단위는 초(s) 혹은 밀리초(ms)이며, 기본값은 0이다.

트랜지션

#ex:hover .box {
	transform: rotate(720deg);
	margin-left: 420px;
}

#no-delay {
	transition-duration: 3s;
	border: 1px solid #ff6a00;
}

#delay {
	transition-duration: 3s;
	transition-delay: 1s;
	border: 1px solid #006aff;
}

 

---

애니메이션

애니메이션을 시작하고 끝내는 동안 스타일을 바꾸면서 애니메이션을 정의할 수 있다. 

@keyframe 을 사용하여 애니메이션 중간에 스타일이 바뀌는 지점을 설정해준다.

 

@keyframes 속성

애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 지점을 설정하는 속성이다.

이름으로 애니메이션을 구별한다. 

시작은 0%, 끝은 100%로 지정

from, to가 각각 시작과 끝이며 중간에 %로 중간 지점을 지정할 수 있다. 

 

animation-name 속성

식별자

애니메이션 이름을 지정

 

animation-duration 속성

애니메이션 실행 시간을 설정하는 속성.

기본값은 0이다.

단위는 초(s) 혹은 밀리초(ms)이다.

 

animation-direction 속성

애니메이션이 끝난 후 원래 위치로 돌아가거나

반대 방향으로 실행하도록 지정하는 속성

속성 값으로는 normal과 alternate(반대로 되돌아가면서 실행)이 있다. 

 

animation-iteration-count 속성

애니메이션의 반복 횟수를 지정하는 속성이다.

숫자 혹은 infinite(무한 반복)을 속성값으로 갖는다. 

 

animation-timing-function 속성

애니메이션 속도 곡선 지정

linear : 똑같은 속도

ease (=ease-in-out) : 천천히 시작해 점점 빨라지다가 천천히 끝나는 값 (ease가 기본값)

ease-in : 시작을 느리게

ease-out : 끝을 느리게

cubic-bezier(n, n, n, n) : 직접 정의 n은 0~1 사이의 값

 

애니메이션

.box {
	width: 60px;
	height: 60px;
	margin: 60px;
	animation: rotate 3s infinite, background 3s infinite alternate;
}

@keyframes rotate {
	from {
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
	}
	to {
		transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
	}
}

@keyframes background {
	from {
		background: red;
	}
	50% {
		background-color: green;
	}
	to {
		background-color: blue;
	}
}

 

 

 

 

 

 

 

 

 

출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)

사진 출처 : Pixabay