개발일지 210707

이동섭·2021년 7월 7일

대구AI스쿨 애니메이션 기초

대구AI스쿨 개발일지

목록 보기

8/48

8일차 요약

transforms : 영역 변환
transition : 영역 변환의 규칙 설정
animation과 @keyframes

학습 내용

실습 내용 / 결과물 출력 첨부

transforms

선택한 영역을 변환시킴

transform: rotate

선택한 영역을 2차원 축으로 회전
transform: rotate(k deg)로 사용
k가 양수면 오른쪽, 음수면 왼쪽으로 회전

transform: scale

선택한 영역을 비율로 늘이거나 줄임
transform: scale(x, y)로 사용
transform: scale(3, 0.5)의 경우 가로로 3배 세로로 0.5배 크기가 적용됨

transform: skew

선택한 영역을 x, y 축으로 비틈
transform: skew(10deg, 20deg)와 같이 사용
마찬가지로 음수로 적용 가능

transform: translate

선택한 영역을 x, y축으로 이동시킴
transform: translate(100px, 300px)과 같이 사용
음수 사용 가능

벤더 프리픽스(Vendor Prefix)

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다.

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.

즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.

그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.

transform: rotate의 경우 익스플로러 10.0이상에서 지원한다 하위 버전에서 이 CSS를 사용하고자 하면 위의 벤더 프리픽스 내용을 참조.

transition

선택한 영역의 변화하는 규칙을 추가한다

예제

html
<body>
	<div class="transition"></div>
</body>
CSS
.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;
.transition:hover {
	width: 600px;
}    
이 경우 div 태그에 가상선택자 hover를 적용하여, 영역 위에 마우스오버 할 경우 가로 크기가 600px로 커진다.

transition의 적용

CSS 추가
.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
}
transition-property: width;
: 폭에 대한 트랜지션을 적용함

transition-duration: 2s;
: 트랜지션의 적용 기간을 설정, 여기서는 2초

transition-timing-function: linear;
: 트랜지션의 완급조절(?)을 설정. 점점빠르게, 점점느리게 등등 설정 가능. 여기서는 linear. 즉, 일정한 속도로 트랜지션.

transition-delay: 1s;
: 트랜지션의 조건이 만족된 상태로 시작되기까지의 딜레이

예제에 적용된 내용을 종합
: div태그의 영역 위에 1초 이상 마우스오버하면 2초간 일정한 속도로 600px까지 커진다. 또, 마우스오버를 해제한 경우에도 1초의 딜레이가 적용됨.
transition: width 2s linear 1s;
위와 같이 각각의 속성값들을 transition속성 하나로 작성할 수 있음.

속성값의 순서는 상관 없으나 duration과 delay는 순서를 지켜야 함.
.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;
}
.transition:hover {
	width: 600px;
	height: 600px;
}
위의 경우에서 세로 축으로도 앞서와 동일한 트랜지션을 적용하고자 할 때
.transition {
	transition: width 2s linear 1s, height 2s linear 1s;
}
이처럼 쉼표로 구분하여 속성값을들 다시 나열해주면 된다.

animation

애니메이션의 경우 hover와 같은 상호작용 없이 영역을 움직이게 할 수 있다.
animation-name : 임의제목;
과
@keyframes 임의제목
두 코드를 연동해서 사용한다.

animation 코드

animation-name
: 애니메이션의 이름을 지정한다
animation-duration
: 애니메이션의 재생 시간을 지정한다
animation-timing-function
: 애니메이션의 완급조절을 지정한다
animation-delay
: 애니메이션이 시작되기까지의 딜레이를 지정한다
animation-iteration-count
: 애니메이션의 재생 횟수를 지정한다. 속성값으로 숫자를 넣거나 infinite를 넣어 무한 재생시킨다.
animation-direction
: 애니메이션의 진행방향을 지정한다.
normal/reverse/alternate/alternate-reverse의 속성값이 있다
각각 정방향/역방향/왕복/역방향왕복

참고

animation-iteration-count에 숫자 속성값으로 횟수를 정해주고 animation-direction을 alternate로 하는 경우 왕복이 아닌 편도를 1회로 계산한다.

@keyframes 코드

@keyframes A(animation-name의 속성값) {
	from {
		width: 300px;
		height: 300px;
		background-color: yellow;
	}
	50% {
		background-color: blue;
	}
	to {
		width: 600px;
		height: 600px;
		background-color: red;
	}
}

위와 같이 animation-name의 속성값과 연동하여 사용한다.
from(또는 0%) 이하 애니메이션의 시작 속성값을 지정할 수 있다.
to(또는 100%) 이하 애니메이션의 최종 속성값을 지정할 수 있다.
50% 처럼 특정 구간에서의 속성값을 지정할 수 있다.

animation코드 간소화

animation: NAME, 3s, linear, tifinite, alternate 
animation코드 역시 위와 같이 간소화하여 앞서 코드들의 속성값을 나열하는 방식으로 사용 가능함.

stylie

아래 사이트의 툴을 이용해 복잡한 애니메이션 코드를 생성할 수 있다.

https://jeremyckahn.github.io/stylie/

애니메이션 실습

트랜지션이 적용된 메뉴 버튼

html
<body>
	<nav class="mouse-animation">
		<ul>
			<li><a href="#">menu1</a></li>
			<li><a href="#">menu2</a></li>
			<li><a href="#">menu3</a></li>
			<li><a href="#">menu4</a></li>
		</ul>
	</nav>
</body>
CSS(1) 기본
html, body {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: #000000;
}
.mouse-animation li {
	width: 250px;
	background-color: #c8c8c8;
	padding: 20px;
	border-top: solid 5px #dfdfdf;
	transition: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover {
	opacity: 0.5;
	margin-left: 10px;
}
.mouse-animation li a {
	color: #ffffff;
	font-size: 20px;
}
html, body에 대한 초기화 및 ul, a태그의 디폴트 속성 수정

li태그의 영역크기 배경 색 등 지정

a태그의 글자색상, 크기 등 지정

li태그에 대한 hover 가상선택자 생성

transition 설정으로 투명도와 margin-left에 대한 애니메이션 생성

결과출력

menu2에 마우스 오버한 모습.

트랜지션이 적용된 메뉴 버튼(2)

위의 결과에서 메뉴라는 글자에 대해서는 opacity를 적용하고싶지 않다면 (li 블럭만 투명하게 하고 싶다면) 아래와 같이 수정

CSS
.mouse-animation li {
	width: 250px;
	background-color: rgba(200, 200, 200, 1);
	padding: 20px;
	border-top: solid 5px #dfdfdf;
	transition: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover {
	background-color: rgba(200, 200, 200, 0.5);
	margin-left: 10px;
}
li태그와 가상선택자 hover의 두 부분을 수정

li태그의 배경색상을
background-color: rgba(200, 200, 200, 1);
로 수정. (#c8c8c8의 rgb값 200, 200, 200 + 투명도100%=1)

hover가상선택자의 opacity 대신 배경색상을 위와 동일하게 하되 투명도를 50%= 0.5로 조절해줌

rgba 값을 찾는 방법으로 아래 사이트 참조

http://hex2rgba.devoth.com/

결과출력

'menu2'가 1, 3과 동일하게 투명도 적용되지 않음

움직이는 영역

html
<div class="move-box"></div>
CSS
.move-box {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;
	animation-name: movebox;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	animation-fill-mode: backwards;
}
@keyframes movebox {
	0% {
		background-color: green;
		left: 0;
		top: 0;
	}
	25% {
		background-color: yellow;
		left: 500px;
		top: 0;
	}
	50% {
		background-color: gray;
		left: 500px;
		top: 500px;
		border-radius: 50%;
	}
	75% {
		background-color: blue;
		left: 0;
		top: 500px;
	}
	100% {
		background-color: red;
		left: 0;
		top: 0;
	}
}
설명

선택된 div의 position이 relative. 따라서 각각의 진행도에 대한 left와 top의 속성값으로 이동하는 영역을 만들 수 있다.

animation-play-state
running/puase속성값으로 페이지에 접속 시 애니메이션의 동작여부를 설정할 수 있다.

animation-fill-mode: backwards;
:이를 통해 선택된 div의 원래 영역 배경색과 무관하게 0%에서 자연스럽게 0%에서의 배경색에서 시작하도록 만들어준다.

animation의 상속

html

<div class="outer-border">
	<div class="inner-border"></div>
</div>

CSS

.outer-border {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	border: solid 15px red;
	border-radius: 50%;
	margin: 0 auto;
	margin-top: 200px;
	animation:  outerborder 2s infinite;
}
@keyframes outerborder{
	0% { border-color: red; transform: scale(1.0);}
	25% { border-color: yellow; transform: scale(1.2);}
	50% { border-color: blue; transform: scale(1.3);}
	75% { border-color: green; transform: scale(1.2);}
	100% { border-color: pink; transform: scale(1.0);}
}
.inner-border {
	width: 75px;
	height: 75px;
	border: 5px solid purple;
	animation: innerborder 2s infinite alternate;
}
@keyframes innerborder{
	0%{ transform: rotate(0deg); }
	25%{ border-width: 10px; }
	50%{ border-width: 20px;}
	75%{ border-width: 40px;}
	100%{ border-width: 5px; transform: rotate(360deg) }
}

설명

@keyframes outerborder 하위의 속성들에서 진행도에 따라 테두리 색상과 크기가 변하도록 지정해주었음.
.inner-border로 선택한 div영역에 대한 border 속성값이 있으므로 위의 @keyframes outerborder 속성 중에서 transform만 상속됨.

마리오 동전 박스

html

<div class="mario-container">
	<div class="mario-coin"></div>
	<div class="mario-box"></div>
</div>

CSS

.mario-coin {
	position: relative;
	width: 70px;
	height: 70px;
	background-color: gold;
	border-radius: 50%;
	margin: 0 auto;
	margin-top: 100px;
	animation: jumpcoin 0.8s linear infinite;
}
@keyframes jumpcoin {
	0%{
		transform: translateY(0);
		opacity: 1;
	}
	50%{
		transform: translateY(-100px) rotateY(180deg);
		opacity: 0.3;
	}
	100%{
		transform: translateY(-100px) rotateY(360deg);
		opacity: 0;
	}
}
.mario-box {
	width: 100px;
	height: 100px;
	background-color: blue;
	margin: 0 auto;
	animation: jumpbox 0.5s linear infinite alternate;
}
@keyframes jumpbox {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

설명

아래와 같이 transform 뒤에 기능들을 병렬적으로 나열 가능
```
transform: translateY(-100px) rotateY(180deg);	
```
translateY, rotateY는 이름그대로 y축에만영향을 끼침.

이미지 영역에 마우스오버 시 확대

html
<div class="hover-image">
	<img src="https://image.utoimage.com/preview/cp932013/2020/10/202010013897_500.jpg">
	<div class="image-info">
		<h2>title</h2>
		<p>paragraph</p>
	</div>
</div>
CSS(1)
.hover-image {
	width: 400px;
	border: solid 10px #000000;
}
.hover-image img {
	width: 100%;
}
.hover-image로 선택된 div 의 영역 크기가 400px이다

img태그에 삽입된 url의 이미지의 가로 사이즈가 400px을 초과할 때 img태그의 폭을 100%로 조절해주면 가로 400px, 세로는 원본 비율에 맞게 조절된다.

결과

CSS(2)
.hover-image {
	position: relative;
	width: 400px;
	border: solid 10px #000000;
}
.hover-image img {
	width: 100%;
	vertical-align: middle;
}
.hover-image .image-info {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	background-color: rgba(200, 200, 200, 0.5);
	padding: 20px;
	left: 0;
	bottom: 0;
}
.hover-image .image-info h2,
.hover-image .image-info p {
	margin: 0;
	padding: 0;
	color: #ffffff;
}
.hover-image .image-info h2 {
	font-size: 20px;
}
.hover-image .image-info p{
	font-size: 15px;
}
img태그에 vertical-align 값을 주어 태그에 내장된 미세한 하단 공백 제거
.hover-image .image-info {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
위와 같이 border-box로 border두께를 포함한 레이아웃 설정

포지션 변경 및 폭 100%로 설정
이후 부모 div태그에 position: relative를 설정해주어 .image-info의 width 100%를 부모 div태그를 기준으로 갖도록 설정

결과

CSS(3)
}
.hover-image img {
	width: 100%;
	vertical-align: middle;
	transition: transform 0.5s linear;
}
.hover-image:hover img {
	transform: scale(1.3);
이미지 태그의 가상선택자를 통해 마우스오버시 1.3배로 스케일 됨

transition: transform 0.5s linear; 속성값 적용으로 스케일 방식을 적용

CSS(4)
}
.hover-image .image-info {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	background-color: rgba(200, 200, 200, 0.5);
	padding: 20px;
	left: 0;
	bottom: -85px;
	transition: bottom 0.5s linear;
}
.hover-image:hover .image-info {
	bottom: 0;
image-info로 선택된 div의 bottom 값을 조절해 아래로 숨김

가상선택자를 통해 마우스오버 시 이전처럼 노출시킴.

transition: bottom 0.5s linear;을 통해 이미지와 동일한 속성값 적용