⏺학습한 내용🕵️‍♂️

⭕ CSS (animation) 강의내용

✅ transform

🔷 선택한 오브젝트의 크기를 축소/확대, 각도회전, 위치변경에 사용

ex)
.transform {
	transform: rotate(45deg);
	transform: scale(2, 3);
	transform: skew(10deg, 20deg);
	transform: translate(100px, 300px);
   }

▶ transform: rotate({±n}deg)

양수 : 오른쪽으로 회전

음수 : 왼쪽으로 회전.

2차원에서의 선택된 영역에 회전효과를 적용할 때

▶ transform: scale( n, n)

선택한 영역을 비율로 (가로,세로) 크기 조절할 때 사용 (줄일때는 소수점 사용가능)

scale을 적용한 영역은 자식영역에도 적용이 된다.

▶ skew(n deg, n deg)

선택한 오브젝트의 3차원 회전 효과 적용

▶ translate(n px, n px)

선택한 오브젝트의 위치를 변경할 때 사용

x축 , y축으로 이동 값 적용

---

🔘 prefix

🔷각각의 브라우저마다 버전이 있는데, 해당버전의 하위버전에서도 transform을 적용시킬때 사용

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform:  rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
--------------------------------------------
webkit-크롬, 사파리
moz-파이어폭스
ms-익스플로어
0-오페라
후에 defalut 값의 transform 적용

---

✅ transition

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
----------------------------------------------
transition: width 2s linear , height 2s linear; 한번에 표시

▶ property : 바꿀려는 속성

▶ duration : 애니메이션이 진행되는 시간

▶ timing-function : 애니메이션이 진행되는 여러 특성의 속도(linear : 시작~끝 일정한속도)

▶ delay : 커서를 올렸을 때 애니메이션 발동준비시간

❗ 주의점=> 같은 속성에서는 쉼표x, 순서는 상관 x, 대신 가장 먼저 나오는 숫자가 duration, 후에 나오는 숫자값이 delay

---

✅ animation

animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

▶ iteration-count : 애니메이션 진행횟수

▶ infinite : 애니메이션 무한 진행

▶ direction : 애니메이션 진행방향

▶ normal: 정방향 진행

▶ alternat : 왕복 진행

---

❗ @keyframes

@keyframes changeWidth{
	0%{
		width: 300px;
		height: 300px;
		background-color: yellow;
	}
	50%{
		background-color: green;
	}
	100%{
		width: 600px;
		height: 600px;
		background-color: red;
		border: solid 3px blue;
	}

▶ 2가지 방법 from => to 방식 / 0%~ 100% 지정 방식

🔷 CSS animation reference site

---

✅ 실습

🛑 text를 제외한 배경에만 투명도를 적용시킬 때는 rgba 컬러적용을 해준다.

🛑 fill-mode : backwards => 애니메이션 시작 색상과 최초 색상을 맞춰주는 특성

🛑 img tag에선 vertical-align: middle; defalut 값으로 넣어준다

🛑 부모가 3차원적인 특징을 갖고 있다면 자식으로 3차원을 적용했을때, 그 width값을 부모값을 기준으로 정할 수 있다.

🔷 RGBA reference site

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 오늘 강의는 따라가기에 급급했던 것 같고 평소보다 오래 걸렸다,, 혼자서 만들라고 하면 도움없이 만들긴 힘들지 않을까 싶은데 원래 개발이라는게 이것저것 잘 찾아가면서 작업하는거랬으니 위안삼아본다,,,

---

⏺해결방법🙋‍♂️

🔘 알려주는 레퍼런스 사이트들이 정말 실무 꿀팁인것 같다..! 명령어들을 제자리에 찾아 넣는 스킬들은 역시,,반복..숙달...뿐이다..화이팅..!

---

⏺학습소감🙇‍♂️

🔘 처음으로 살짝 힘들었다,,,,,,동적효과 넣는 부분을 기대했는데 간단해보이지만 실제로 뒤에선 많은 작업이 들어가구나 싶었다. 후반부를 가면 지금 작업이 아주 사소하고 쉬운 작업이겠지만,,내일도 힘!

---