[ 배운내용]

CSS애니매이션
이미지가 스스로 움직이거나 이동, 변형되는 것을 애니매이션이라 하고, 기존에는 자바스크립트로 했으나 최근 css의 언어가 발전해 css로도 가능할 수 있게 되었다.

Transform

특정 영역의 모양, 방향 등을 변화시킬 수 있는 속성이다.
transfom: ' ___ ()' 안에 아래와 같은 속성과 속성값이 들어간다.

• rotate(00deg)
  : 선택된 영역의 기울기를 설정한다. 음수와 양수deg로 입력하며, 양수는 오른쪽으로, 음수는 왼쪽으로 기울어진다.

• scale(0,0)
  : 선택된 영역의 크기를 비율로서 확대 혹은 축소 조정한다. (2,3) 일 경우 가로 2배, 세로 3배로 키우는 명령이다. 더 작게 하고 싶다면 소수점으로 작성해주면된다. (0.5, 0.5)는 가로세로 1/2배로 줄이는 명령이다.

• skew(0deg,0deg)
  : 선택된 영역의 왜곡을 설정한다. (x축의 기울기각도, y축의 기울기각도)값이며 음수와 양수 모두 입력 가능하다.

• traslate(000px, 000px)
  : 선택한 영역의 물체 위치를 변경한다. 첫번째 속성값은 x축(가로), 두번째 속성값은 y축(세로)로 움직인다.

prefix

: 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.

예를 들어 transform과 같은 경우 익스플로러 10.0이상에서만 사용할 수 있도록 Browser Suppot를 가지고 있다. 이 transform을 9.0에서도 사용하고 싶을 때 앞에 -ms- 를 입력하여 준다.

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

예)
-webkit-
-moz-
-ms-
-o-

Transition

hover값을 주는 경우와 같이 어떤 변화를 만들 때, 변화를 좀 더 자연스럽게 만들어주는 속성이다.
transition-' ____ ' 안에 아래와 같은 속성이 들어간다.

.example{ width: 300px, height:300px}

.example:hover{width:600}

이때 속성은 초록색으로 표시된 .example클래스 안에 작성한다.

• property : 바꾸고자 하는 속성을 입력한다. 위의 예시에서는 width값이 바뀌므로 아래와 같이 적용한다.

  transition-property: width

• duration : 지속시간을 입력한다. width값이 300px에서 600px로 변하는 시간을 2초로 지정하기위해 아래와 같이 적용한다.

  transition-duration: 2s

• timing-function : 변화의 속도를 지정한다.

  transition-timing-function: llinear

  linear의 경우 선형으로 변화한다는 의미로 속도가 처음부터 끝까지 동일하다. 입력할 수 있는 속성값으로는 linear외에도 ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start | end), cubic-bezier(n, n, n, n)가 있다.

• delay : 지정한 변화가 바로 실행되지 않고 기다리는 시간을 설정한다.

  transition-delay: 1s

  1초로 작성해주면 화면이 켜지고 1초뒤에 변화가 실행된다.

Transition의 한줄 입력

transition도 따로 입력하지않고 하나의 명령으로 지정할 수 있다. 아래와 같이 transition명령어 안에 띄어쓰기로 구분하여 입력해준다.

transition: width 2s linear 1s

※주의: 이 때, 속성값을 넣는 순서는 상관이 없으나, duration과 delay는 순서에 맞게 넣어주어야 한다. duration - delay 순서이며 숫자값이 하나가 있을 경우는 duration으로 인식한다.

여러가지 transition 적용하기

: 변화를 주고자하는 속성이 여러가지인 경우가 있다. 예를 들어 너비와 높이/ 너비와 색상 등 여러가지 transition을 동시에 적용하고 싶을 경우, transition: 안에 쉼표(,)로 구분하여 넣어주면 된다.

transition: width 2s linear 1s, height 2s linear 1s

Animation

영역이나 이미지가 스스로 움직이게 하기위한 속성이다. 애니매이션은 아래와 같은 코드를 입력한다.

• animation-name : 애니매이션의 이름을 정의한다. 이 이름이 @keyframe에 이용된다..

• animation-duration : 한 싸이클의 애니메이션 지속시간.

• animation-timing-function : 재생속도를 설정한다.

• animation-delay : 요소들이 로그되고 언제실행될지 설정한다.

• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정한다. 숫자를 입력하거나, infinite 로 지정하여 무한반복할 수 있다.

• animation-direction : 애니메이션의 진행방향을 지정한다.
  normal로 한방향으로 계속 진행하거나, alternate를 입력해 애니매이션이 한번 끝나면 다시 역방향으로 애니매이션이 실행되는 것이 반복된다.
  이때, 역방향도 한번으로 인식되며, interate-count를 6으로 지정했을 경우, 정방향-역방향 이 3번 반복된다.

• animation-play-state : 애니메이션을 멈추거나 다시 시작하게 한다. running, pause와 같은 값을 준다.

• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
  예로는 none, forward, backward, both가 있다.

  .example{(영역의 속성값-크기 등)
  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;}
  

Animation도 Transition처럼 한줄로 입력가능하다.

@keyframe

: 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
(1)from, to

@keyframe moveBox{
from{width: 300px; height: 300px; background-color: green;}

to{ width: 600px; height: 600px; background-color: red}
}

from이나 to 중 하나에만 특징을 부여해도 부자연스럽긴하지만 적용이 된다.

(2)0~100%
: from, to가 아니라 0%, 100%로 설정할 수 있다. 이말인 즉슨 0~100사이의 특정지점에도 변화를 설정할 수 있다.

@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: deeppink; left: 0; top: 0; }

영역의 색상도 바뀌면서 동시에 위치도 바뀌는 애니매이션 태그의 모습이다.

실습

(1) 메뉴버튼에 커서를 올렸을 때 움직이는 효과

.mouse-animation li{
 	width: 200px;
 	background-color: rgba(0, 0, 0, 1);
 	padding: 20px;
 
 	border-top:  solid 5px #dfdfdf;
 	transition: opacity 0.5s, margin-left 0.5s; }

  .mouse-animation li:hover{
  	background-color: rgba(0, 0, 0, 0.5);
	/*opacity: 0.5;*/
  	margin-left: 10px; }

 .mouse-animation li a{
 	color: #ffffff;
 	font-size: 20px; }

• 이때 배경색을 #000000 → #c8c8c8처럼 헥스코드로 입력하고 opacity:0.5를 이용해 hover가 작동했을 때 투명도를 조정하도록 할수도있지만, 이렇게 하면 자식코드인 a인 글자에도 투명도가 적용되어 코드가 꼬이는 경우가 발생한다.
  그러므로 rgba()를 이용해서 rgba코드 내에서 (예시에서 마지막값) 투명도를 조절해주면 코드꼬임 없이 원하는 명령을 할 수 있다.

• transition속성 안에서 투명도(opacity)와 마진을 이용한 위치변경(margin-left)에 duration 0.5초를 주어서 메뉴에 커서를 올렸을때 자연스럽게 표시되도록 했다.

(2) 박스가 움직이는 효과

.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;	}
}

• fill-mode: 위 예시와 같이 도형의 색상을 변경하는데 원래 배경색이 red이고 0%에서 색이 green이면 애니매이션이 실행되면서 빨간색이던 영역이 갑자기 초록색으로 매우 부자연스럽게 변하고 애니매이션이 시작된다. 이를 방지하기 위해서는 0%일때 색을 원래 배경색과 똑같이 red값을 주어야하는데 이렇게 되면 매우 번거로우므로, 이때 사용할 수 있는 코드가 fill-mode이다. 애니매이션이 시작되기 전, 빨간색을 초록색으로 바꿔주면 자연스러워질 것이다. 그렇게 하기위해서 첫 시작색상을 원래영역색상이 아닌 0%지점의 색상을 주기 위해서 fill-mode값을 backward로 주면된다.

(3) 이중 애니매이션

.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;
	animation-timing-function: linear;
}

@keyframes outerBorder{
	0%{ border-color: red; transform: scale(1);}
	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)}
	}


.inner-border {
	box-sizing: border-box;

	width: 85px;
	height: 85px;
	border:  5px solid	purple;

	animation: innerBorder 2s infinite alternate;
}

@keyframes innerBorder{
	0%{ transform: rotate(0); }
	25%{ border-color: blue;  border-width: 10px;}
	50%{ border-color: yellow; border-width: 20px;}
	75%{ border-color: green; border-width: 40px;}
	100%{ border-color: grey; border-width: 5px; transform: rotate(360deg); }
}

• 자식은 부모의 애니매이션 값을 받는다
  :부모, 자식 관계로 두가지 영역을 만들어주었다. 이때 부모인 outer-border에 scale을 통해 크기가 변하는 애니매이션을 적용하면, 자식인 inner-border도 함께 같은 배율로 크기가 변한다.

• 자식태그가 부모태그보다 커지지않게 하기 위해 box-sizing: border-box를 지정한다.
  : 위의 애니매이션 값에서 inner-border는 테두리굵기가 변하는 애니매이션을 가지고 있다. 이때 테두리굵기가 변하면서 75%지점에서는 부모인 outer-border보다 더 커지게 되는데, box-sizing을 주어서 자식태그가 안쪽으로 테두리굵기가 변하게된다.

(4) 슈퍼마리오 동전 효과

.mario-container{
	position: relative;

	width: 500px;
	height: 500px;
	border: solid 10px black;

	margin: 0 auto;
	margin-top: 200px;
}


.mario-container .mario-coin{
	position: relative;
	width: 70px;
	height: 70px;
	background-color: yellow;
	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;}
	100%{ transform: translateY(-100px) rotateY(360deg); 
		opacity: 0;}
 }

.mario-container .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) }
}

• translateY()
  :슈퍼마리오에서 박스와 동전이 위아래로 움직이기때문에 translate(x축값, y축값)을 쓰지않고 translateY(값) 를 사용한다.

• 동전은 위로 움직이면서 사라지도록, 그리고 y축 기준으로 회전하도록 애니매이션을 주어야 한다.
  각각 translate, opacity, rotateY 값을 준다.

• transform에서 복수의 효과 넣기
  : 동전의 경우 transform안에 translate와 rotate라는 복수의 효과를 동시에 적용해야하므로, 하나의 transform 안에 띄어쓰기로 입력해준다. 쉼표가 아니라 띄어쓰기 !

(5) 커서올릴때 이미지가 확대되는 효과

.hover-image{
	cursor: pointer;
	overflow: hidden;
	position: relative;

	width: 400px;
	border: solid	10px	#000000;
}

.hover-image img{
	width: 100%;
	vertical-align: middle;
	transition: transform 0.3s linear;
}

.hover-image:hover img{
	transform: scale(1.3); }
    
.hover-image .image-info{
	box-sizing: border-box;
	position: absolute;
	width: 100%;

	background-color: rgba(0, 0, 0, 0.5);
	padding: 20px;

	left: 0;
	bottom: -85px;

	transition: bottom 0.3s linear;
}

.hover-image:hover .image-info{
	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의 width값을 100%로 준다.

• img태그는 기본적으로 하단에 미세한 공백이 있다. 이 공백을 없애주기위해서 vertical-align:middle

• hover-info에 3차원특징을 주기위해 absolute, width값은 100%준다. 이때 100%는 브라우저 전체를 차지하는데,box-sizing:border-box를 주고 부모태그인 hover-image에 relative를 부여하면 사진크기만큼 적용된다.

• scaleup 효과를 넣을 때 overflow:hidden을 함께사용해주어야한다. 그렇지않으면 내용물이 테두리를 넘어 커지게되면서 부자연스러운 모습이 나타날 수 있기 때문이다.

• cursor:pointer는 영역에 마우스를 올렸을 때 커서모양을 손가락 모양으로 바꾸는 특징을 준다.

[어려웠던 점]

1. skew의 개념

2. 원형에 사각형을 넣어서 함께 움직이도록 하는 부분에서 자꾸 inner-border인 사각형이 나오지 않아서 오타가 있는지 한참 찾았으나 찾지못했다.

3. vertical-align:middle

[해결방법]

2. 결국 대괄호 하나가 } 짝없이 있는 것을 발견했고, 이것을 지웠더니 적용이 되었다.

1,3. 복습하기

[학습소감]

이 많은 요소들을 내가 만들어낼 수 있을까 조금 두려운 생각이 드는 수업이었다. 자꾸 이전에 배웠던 것들이 헷갈리기도 하고 기초를 제대로 다져야하는 중요한 시기인것 같다.